ブートストラップインライン2フォームの上にラベルが入力されています

Question

私はレスポンシブデザインに問題があります。だから私は、コンポーネントいる：

ここではコードです：

    <div class="row"> 
         <div class="col-md-7 pull-left"> 
          <div class="form-group"> 
           <label>City</label> 
           <input type="text" class="form-control"> 
          </div> 
         </div> 
         <div class="col-md-5"> 
          <div class="form-group"> 
           <label>Postal code</label> 
           <input type="text" class="form-control"> 
          </div> 
         </div> 
        </div> 
        <div class="row"> 
         <div class="col-md-7 pull-left"> 
          <div class="form-group"> 
           <label>Street</label> 
           <input type="text" class="form-control">          
          </div> 
         </div> 
         <div class="col-md-5"> 
          <div class="form-group"> 
           <label>House</label> 
           <input type="text" class="form-control">          
          </div> 
         </div> 
        </div> 

問題は、私は、ウィンドウのサイズを変更したときである - 私はこの醜い破壊のデザインがあります。

を

どうすれば修正できますか？私はプル左のすべての列に追加しましたアドバイスを使用して

UPDATE

（のみそれが可能だ場合はブートストラップ）、すべてが大丈夫です。

しかし、私は少しのensmallサイズは結果がある場合：今推測の

Answer 1

ビット、フォーム項目がリフローするかしないかどうかわかりません。期待される結果は何ですか？各入力はそれ自身の行（つまり、4行の入力）になっていますか？または、1行あたり2つの入力をすべてのサイズで維持する必要がありますか？

ここでは、各入力をブレークポイントで独自の行に配置する方法を示します。

各行の最初の列から.pull-leftを削除します。ここ

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');

<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-md-7"> 
 
     <div class="form-group"> 
 
     <label>City</label> 
 
     <input type="text" class="form-control"> 
 
     </div> 
 
    </div> 
 
    <div class="col-md-5"> 
 
     <div class="form-group"> 
 
     <label>Postal code</label> 
 
     <input type="text" class="form-control"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col-md-7"> 
 
     <div class="form-group"> 
 
     <label>Street</label> 
 
     <input type="text" class="form-control"> 
 
     </div> 
 
    </div> 
 
    <div class="col-md-5"> 
 
     <div class="form-group"> 
 
     <label>House</label> 
 
     <input type="text" class="form-control"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

行ごとに2つの入力を維持するためのソリューションです。別の列クラスを使用する必要があります。現在は、-md-という媒体を使用しています。ここで私は余分な小さな-xs-クラスを使用しました。異なる列クラスについては、Bootstrap Grid Optionsを参照してください。

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');

<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-xs-7"> 
 
     <div class="form-group"> 
 
     <label>City</label> 
 
     <input type="text" class="form-control"> 
 
     </div> 
 
    </div> 
 
    <div class="col-xs-5"> 
 
     <div class="form-group"> 
 
     <label>Postal code</label> 
 
     <input type="text" class="form-control"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col-xs-7"> 
 
     <div class="form-group"> 
 
     <label>Street</label> 
 
     <input type="text" class="form-control"> 
 
     </div> 
 
    </div> 
 
    <div class="col-xs-5"> 
 
     <div class="form-group"> 
 
     <label>House</label> 
 
     <input type="text" class="form-control"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

私はあなただけで下記のようにすべての列<div>タグに "プル左" を追加必要があると思う：

     <div class="row"> 
         <div class="col-md-7 pull-left"> 
          <div class="form-group"> 
           <label>City</label> 
           <input type="text" class="form-control"> 
          </div> 
         </div> 
         <div class="col-md-5 pull-left"> 
          <div class="form-group"> 
           <label>Postal code</label> 
           <input type="text" class="form-control"> 
          </div> 
         </div> 
        </div> 
        <div class="row"> 
         <div class="col-md-7 pull-left"> 
          <div class="form-group"> 
           <label>Street</label> 
           <input type="text" class="form-control">          
          </div> 
         </div> 
         <div class="col-md-5 pull-left"> 
          <div class="form-group"> 
           <label>House</label> 
           <input type="text" class="form-control">          
          </div> 
         </div> 
        </div> 

Iとまともな結果を得ることができ。