ブートストラップの行レイアウト

Question

私はモーダルウィンドウに表示されるフォームを作成しようとしています。ここに私のHTMLは、（私は右の解決策はすべて私の行に適用されると考えているので、最初の行のみを示す）

<div class="container"> 
    <div class="row"> 
     <div class="col-sm-1">&nbsp;</div> 
     <div class="col-sm-8"> 
      <form action="#" method="post">    
       <fieldset> 
        <legend style="width: 80%">Base Information</legend> 
        <div class='row'> 
         <div class='col-sm-5'> 
          <div class='form-group'> 
           <label for="user_firstname">First name</label> 
           <input class="form-control input-sm" id="user_firstname" name="user[firstname]" required="true" size="30" type="text" /> 
          </div> 
         </div> 
         <div class='col-sm-5'> 
          <div class='form-group'> 
           <label for="user_lastname">Last name</label> 
           <input class="form-control input-sm" id="user_lastname" name="user[lastname]" required="true" size="30" type="text" /> 
          </div> 
         </div> 
         <div class="col-sm-2">&nbsp;</div> 
        </div> 
       </fieldset> 
      </form> 
     </div> 
    </div> 
</div> 

だ私が直面してる問題は、私は現在、Chromeを使用して、これを見たとき、私は水平にサイズ変更してるということですブラウザのウィンドウが760ピクセル未満になると、すべてのフォーム要素が互いに積み重ねられます。

あなたは私がを取り除くためにしようとしている右のスペースの多くがあります見ることができるように。

右のパディングを排除する方法について、他に提案がありますか？

Answer 1

col-xsの代わりcol-smに役立つだろうしbreakpoint号空のスペースが2列指定されているため、右に空白があるようです。<div class="col-sm-2">&nbsp;</div>Bootstrap's grid systemは、行ごとに12列に基づいているため、2つの列にわたるdivはスペースを占有します。

Answer 2

ブートストラップは12列を推奨します。あなたのレイアウトはわずか9それらのを使用しています：

<div class="col-sm-1">&nbsp;</div> 
<div class="col-sm-8"> 
... 
</div> 

あなたが代わりにcol-sm-8、<div class="col-sm-1">&nbsp;</div>と<div class="col-sm-2">&nbsp;</div>（offsetting columns）のcol-sm-10 col-sm-offset-1を使用することができます。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-sm-10 col-sm-offset-1"> 
 
     <form action="#" method="post">    
 
     <fieldset> 
 
      <legend>Base Information</legend> 
 
      <div class="row"> 
 
      <div class="col-sm-6"> 
 
       <div class="form-group"> 
 
       <label for="user_firstname">First name</label> 
 
       <input class="form-control input-sm" id="user_firstname" name="user[firstname]" required="true" size="30" type="text" /> 
 
       </div> 
 
      </div> 
 
      <div class="col-sm-6"> 
 
       <div class="form-group"> 
 
       <label for="user_lastname">Last name</label> 
 
       <input class="form-control input-sm" id="user_lastname" name="user[lastname]" required="true" size="30" type="text" /> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </fieldset> 
 
     </form> 
 
    </div> 
 
    </div> 
 
</div>