引導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 

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