Бутстрап 3: отзывчивость вопрос, как размер дисплея уменьшает

Question

У меня есть форма 2-колонки, в которой каждый столбец содержит несколько текстовых входов, изготавливают следующим образом:

row 
    left column, col-md-6 
    row 
     label, col-md-4: text inputs, col-md-8 
    right column, col-md-6 
    row 
     label, col-md-4: text inputs, col-md-8 

FIDDLE here. Это выглядит хорошо, с этим выходом на большой экран:

И этот выход на узком экране:

До сих пор так хорошо - это именно то, что я хочу. Проблема возникает, когда ширина текстовых входов в любом столбце (col-md-8) увеличивается выше некоторого порога. Когда это не происходит, переход от широкого экрана к узкому дисплею больше не чисто, и производит этот промежуточный выходной сигнал, как на дисплее сужает:

Это не выглядит хорошо, и будет нуждаться в дополнительном CSS для управления вертикальным интервалом между A и F и т. д. Вы можете вызвать это, изменив size=2 на size=3 для входов D и 4 в скрипке.

Любая идея, если я могу исправить/контролировать это? В принципе, я хочу, чтобы определенные столбцы стекались: либо два столбца col-md-6 должны складываться друг над другом (изображение 2), либо входы col-md-8 должны складываться под метками col-md-4. Вместо этого Bootstrap, похоже, использовал альтернативный подход, который разбивает содержимое внутри столбца (изображение 3). Это кажется неправильным. Благодарю.

Answer 1

Как Это Вам нужно правильно .. DEMO

<div class='row'> 
    <div class='col-md-6'> 
     <div class='row'> 
      <label class='col-md-3 control-label' for='myid1'>Label #1</label> 
      <div class='col-md-9'> 
       <input type=text size=2 maxlength=2 value="A" disabled id='myid1'> 
       <input type=text size=2 maxlength=2 value="B" disabled> 
       <input type=text size=2 maxlength=2 value="C" disabled> 
       <input type=text size=2 maxlength=2 value="D" disabled> 
       <input type=text size=5 maxlength=5 value="E" disabled> 
       <input type=text size=5 maxlength=5 value="F" disabled> 
      </div> 
     </div> <!-- 1st row in left column --> 
    </div>  <!-- left column --> 
    <div class='col-md-6'> 
     <div class='row'> 
      <label class='col-md-3 control-label' for='myid2'>Label #2</label> 
      <div class='col-md-9'> 
       <input type=text size=2 maxlength=2 value="1" disabled id='myid2'> 
       <input type=text size=2 maxlength=2 value="2" disabled> 
       <input type=text size=2 maxlength=2 value="3" disabled> 
       <input type=text size=2 maxlength=2 value="4" disabled> 
       <input type=text size=5 maxlength=5 value="5" disabled> 
       <input type=text size=5 maxlength=5 value="6" disabled> 
      </div> 
     </div> <!-- 1st row in right column --> 
    </div>  <!-- right column --> 
</div>   <!-- outer row --> 

Answer 2

Попробуйте

<form action="#" class="form-horizontal"> 

    <div class="row"> 
    <div class="col-md-6 col-xs-12"> 
<div class="row"> 
    <div class="form-group"> 
     <label class="control-label col-xs-2">Label#1</label> 
     <div class="col-xs-2"> 
     <input placeholder="A" class="form-control" type="text"> 

     </div><div class="col-xs-2"> 
     <input placeholder="B" class="form-control" type="text"> 

     </div><div class="col-xs-2"> 
     <input placeholder="C" class="form-control" type="text"> 

     </div><div class="col-xs-2"> 
     <input placeholder="D" class="form-control" type="text"> 

     </div><div class="col-xs-2"> 
     <input placeholder="E" class="form-control" type="text"> 

     </div> 


    </div> 

    </div></div>  

    <div class="row"> 
    <div class="col-md-6 col-xs-12"> 
    <div class="form-group"> 
     <label class="control-label col-xs-2">Label#2</label> 
     <div class="col-xs-2"> 
     <input placeholder="1" class="form-control" type="text"> 

     </div><div class="col-xs-2"> 
     <input placeholder="2" class="form-control" type="text"> 

     </div><div class="col-xs-2"> 
     <input placeholder="3" class="form-control" type="text"> 

     </div><div class="col-xs-2"> 
     <input placeholder="4" class="form-control" type="text"> 

     </div><div class="col-xs-2"> 
     <input placeholder="5" class="form-control" type="text"> 

     </div> 
    </div> 

    </div></div>  
    </div> 
</form> 

bootplyhttp://www.bootply.com/asBfmaPKqB