Bootstrap inline 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 строки входов)? Или должны ли поддерживаться два входа на строку любого размера?

Вот ответ, чтобы разместить каждый вход в своей строке в точке останова.

Удалить .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>

Вот решение для поддержания двух входов на строку. Вам нужно использовать другой класс столбцов. В настоящее время вы используете среду -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> 

я и смог получить достойный результат.