ブートストラッププル右が期待通りに機能しない

Question

ここでは簡単な質問Bootstrap3を使用しています。私はその下のページをリロードする一種の小さなフィルタを作成したかったのです。私の要件はに一致しましたこのフィルタ（2つの入力と小さなボタン）は、その下にコンテンツを置くと、の最も近い位置にあるになります。

私はpull-rightクラスを使用しようとしましたが、実際にはフィルタを右に引っ張りましたが、まだいっぱいに余裕があります。私が下で提供した例をチェックすると、私はの右側にボタンを揃えることを目的としてが表示されますが、失敗します。

なぜこのようなことが起こるのか分かりませんが、行の余白/パディングに関する問題があると思われます。なぜこの問題が発生するのかを説明する回答がありますもう一度それを扱いません:)。

あなたはby clicking here on bootply

私のマークアップを確認することができます。また、私はここに私のマークアップを投稿します：

<div class="container"> 
    <div class="row" style="background:slateblue;"> 
    <div class="col-xs-12"> 
    <form role="form" class="form-horizontal"> 
      <div class="form-group pull-right"> 
       <div class="col-xs-4"> 
         <input type="text" class="form-control text-center"> 
       </div> 
       <div class="col-xs-4"> 
         <input type="text" class="form-control text-center"> 
       </div> 
       <div class="col-xs-2 col-sm-2" style="margin-top:3px;"> 
         <button type="submit" class="btn btn-success"> 
          <span class="glyphicon glyphicon-refresh"></span> 
         </button> 
       </div> 
      </div> 
     </form> 
     </div><!-- main col 12--> 
    </div><!--row--> 
    <div class="row" style="background:slategrey; height:200px;"> 
    </div> 
</div> 

Answer 1

フォーム・グループを試してみてはできるだけ右に限り揃えている - しかし、それ内のコンテンツではありません。そこには4 + 4 + 2の幅の列しかないので、ブートストラップで使用される12列のグリッドでは、「2列短く」なります。

col-xs-offset-2クラスを追加することで、それらの最初のものを2だけオフセットすることができます。次に、整列を達成したいものに近づけるべきです。

Answer 2

ブートストラップ列レイアウトは基本的に12列に行を分割します。ここでは12列のうち10列しか定義していないため、右側にスペースが残っています。

<div class="form-group pull-right"> 
       <div class="col-xs-4 col-xs-offset-2"> 
         <input type="text" class="form-control text-center"> 
       </div> 
       <div class="col-xs-4"> 
         <input type="text" class="form-control text-center"> 
       </div> 
       <div class="col-xs-2 col-sm-2" style="margin-top:3px;"> 
         <button type="submit" class="btn btn-success"> 
          <span class="glyphicon glyphicon-refresh"></span> 
         </button> 
       </div> 
      </div> 

Answer 3

ブートストラップは、12列のグリッド用途：私は見ることができるようにあなたはすべての列を使用している必要があり、このホワイトスペースを持っていないことを確認するには

http://getbootstrap.com/css/#grid（フォートワース読み取り）

をあなたがここに

ではありません、私はあなたのコードを実行するだろうかです：

bootstrap4を使用している人のために

<div class="container"> 
    <div class="row" style="background:slateblue;"> 
     <div class="col-xs-12"> 
      <form role="form" class="form-horizontal"> 
       <div class="form-group"> 
        <div class="col-xs-5"> 
          <input type="text" class="form-control text-center"> 
        </div> 
        <div class="col-xs-5"> 
          <input type="text" class="form-control text-center"> 
        </div> 
        <div class="col-xs-2 col-sm-2" style="margin-top:3px;"> 
          <button type="submit" class="btn btn-success"> 
           <span class="glyphicon glyphicon-refresh"></span> 
          </button> 
        </div> 
       </div> 
      </form> 
     </div> 
    </div> 
</div> 

Answer 4

：

応答性の山車のための

クラスと、彼らは.FLOAT-左へと.FLOAT右を冗長化しているので、左.pullと.pull右 を削除しました。 Bootstrap4移行ノートから

詳細情報：Here