ブートストラップ：サイズが超小型になったときに、フォーム要素の左右のマージンを揃えますか？

Question

私はすべてのサイズで動作し、まともに見えるこの形をした大きなXS（エクストラ小）。

.row { 
 
    margin-bottom: 20px; 
 
} 
 

 
.row:first-of-type { 
 
    margin-top: 40px; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-xs-12"> 
 
     <form action="" method="GET" role="form" class="form-horizontal"> 
 
     <div class="row"> 
 
      <legend>Form title</legend> 
 
     </div> 
 
     <div class="row"> 
 
      <div class="form-group"> 
 
      <label for="first-name" class="col-sm-2">Your First Name: </label> 
 
      <div class="col-sm-4"> 
 
       <input type="text" class="form-control" id="first-name" placeholder="Please enter your first name."> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <div class="row"> 
 
      <div class="form-group"> 
 
      <label for="last-name" class="col-sm-2">Your Last Name: </label> 
 
      <div class="col-sm-4"> 
 
       <input type="text" class="form-control" id="last-name" placeholder="Please enter your last name."> 
 
      </div> 
 
      </div> 
 
     </div> 
 

 
     <div class="row"> 
 
      <div class="form-group"> 
 
      <label for="email" class="col-sm-2">Your Email: </label> 
 
      <div class="col-sm-8"> 
 
       <input type="text" class="form-control" id="email" placeholder="Please enter your email adresse."> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <div class="row"> 
 
      <div class="form-group"> 
 
      <label for="phone" class="col-sm-2">Your Phone Number: </label> 
 
      <div class="col-sm-3"> 
 
       <input type="text" class="form-control" id="phone" placeholder="Please enter your phone number."> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <div class="row"> 
 
      <button type="submit" class="col-sm-1 btn btn-primary">Submit</button> 
 
     </div> 
 
     </form> 
 
    </div> 
 
    </div> 
 
</div>

しかし、表示が余分に小さくなったときに入力し、ラベルは、ブラウザウィンドウの端まで伸ばします。

私は左側に、右側に小さなマージンを持っていると思います。

私は何か間違っていますか？

はちょうどブートストラップで、この問題を解決する方法はありますか？ 追加のCSSを追加する必要がありますか？

Answer 1

非常にシンプルなソリューションを提供します。実際には大失敗。

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-xs-12"> 
 
     <form action="" method="GET" role="form" class="form-vertical"> 
 
     <div class="row"> 
 
      <legend>Form title</legend> 
 
     </div> 
 
     <div class="row"> 
 
      <div class="form-group"> 
 
      <label for="first-name" class="col-sm-2">Your First Name: </label> 
 
      <div class="col-sm-4"> 
 
       <input type="text" class="form-control" id="first-name" placeholder="Please enter your first name."> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <div class="row"> 
 
      <div class="form-group"> 
 
      <label for="last-name" class="col-sm-2">Your Last Name: </label> 
 
      <div class="col-sm-4"> 
 
       <input type="text" class="form-control" id="last-name" placeholder="Please enter your last name."> 
 
      </div> 
 
      </div> 
 
     </div> 
 

 
     <div class="row"> 
 
      <div class="form-group"> 
 
      <label for="email" class="col-sm-2">Your Email: </label> 
 
      <div class="col-sm-8"> 
 
       <input type="text" class="form-control" id="email" placeholder="Please enter your email adresse."> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <div class="row"> 
 
      <div class="form-group"> 
 
      <label for="phone" class="col-sm-2">Your Phone Number: </label> 
 
      <div class="col-sm-3"> 
 
       <input type="text" class="form-control" id="phone" placeholder="Please enter your phone number."> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     
 
      <button type="submit" class="col-sm-1 btn btn-primary">Submit</button> 
 
     
 
     </form> 
 
    </div> 
 
    </div> 
 
</div>

： だけ class="form-horizontal" class="form-vertical"に....

DEMOを変更