引導程序輸入表單對齊

Question

我正嘗試使用引導程序和表單輸入創建數據輸入表單。

看來，直到一些行它把上線的一個條目，而不是3

我已經嘗試了多種途徑，總是看到此行爲很好地工作。

任何幫助理解爲什麼它是做這個傷口不勝感激。 我有一個plunker例如here

<fieldset class="scheduler-border well"> 
    <legend class="scheduler-border">Customer</legend> 
    <form class="form-group" role="form"> 
    <div class="form-group left">  
     <label for="input16" class="col-md-2 control-label">Label A</label> 
     <div class="col-md-2"> 
     <input type="number" class="form-control" id="Label A" placeholder="Label A"> 
     </div> 
     <label for="input17" class="col-md-2 control-label">Customer Label ALpha Beta</label> 
     <div class="col-md-2"> 
     <input type="number" class="form-control" id="Customer Label ALpha Beta" placeholder="Customer Label ALpha Beta"> 
     </div> 
     <label for="input18" class="col-md-2 control-label">Label C</label>   
     <div class="col-md-2"> 
     <input type="number" class="form-control" id="Label C" placeholder="Label C"> 
     </div> 
     <label for="input15" class="col-md-2 control-label">Label D</label> 
     <div class="col-md-2"> 
     <input type="number" class="form-control" id="Label AD" placeholder="Label D"> 
     </div> 
    </div> 
    </form> 
</fieldset> 

如果你推出的預覽窗口，並增加width，你應該能夠看到的行爲。

Answer 1

如果你希望你label和input始終在一條線正好與一個名爲.form-group類一個div包裹兩者（並刪除所有col-md這些是電網系統，而不是form S），見Bootstrap Docs

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<fieldset class="scheduler-border well"> 
 
    <legend class="scheduler-border">Customer</legend> 
 
    <form role="form"> 
 
    <div class="form-group"> 
 
     <label for="input16" class="">Label A</label> 
 
     <input type="number" class="form-control" id="Label A" placeholder="Label A"> 
 
    </div> 
 
    <div class="form-group"> 
 
     <label for="input17" class="">Customer Label ALpha Beta</label> 
 
     <input type="number" class="form-control" id="Customer Label ALpha Beta" placeholder="Customer Label ALpha Beta"> 
 
    </div> 
 
    <div class="form-group"> 
 
     <label for="input18" class="">Label C</label> 
 
     <input type="number" class="form-control" id="Label C" placeholder="Label C"> 
 
    </div> 
 
    <div class="form-group"> 
 
     <label for="input15" class="">Label D</label> 
 
     <input type="number" class="form-control" id="Label AD" placeholder="Label D"> 
 
    </div> 
 
    </form> 
 
</fieldset>

Answer 2

不能完全確定，如果這是你想要的，但我猜你的意思是，對於一些屏幕尺寸標籤d結束了第四列，而它應該是第一列。這裏的問題在於，您的標籤客戶標籤Alpha Beta佔用太高的高度，並且由於引導程序的列只是float:left，的標籤D的智能使用將位於其右側。

調整代碼的最簡單方法是將一組包含3個標籤/輸入的組合包裝在.row中，以在行滿時清除浮動塊。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<fieldset class="scheduler-border well"> 
 
    <legend class="scheduler-border">Customer</legend> 
 
    <form class="form-group" role="form"> 
 

 
    <div class="form-group left container"> 
 
     <div class="row"> 
 
     <label for="input16" class="col-md-2 control-label">Label A</label> 
 
     <div class="col-md-2"> 
 
      <input type="number" class="form-control" id="Label A" placeholder="Label A"> 
 
     </div> 
 
     <label for="input17" class="col-md-2 control-label">Customer Label ALpha Beta</label> 
 
     <div class="col-md-2"> 
 
      <input type="number" class="form-control" id="Customer Label ALpha Beta" placeholder="Customer Label ALpha Beta"> 
 
     </div> 
 

 
     <label for="input18" class="col-md-2 control-label">Label C</label> 
 
     <div class="col-md-2"> 
 
      <input type="number" class="form-control" id="Label C" placeholder="Label C"> 
 
     </div> 
 
     </div> 
 
     <div class="row"> 
 
     <label for="input15" class="col-md-2 control-label">Label D</label> 
 
     <div class="col-md-2"> 
 
      <input type="number" class="form-control" id="Label AD" placeholder="Label D"> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    </form> 
 
</fieldset>

當然這種解決方案是不太守，例如你行最終可能會與不同的垂直距離。也許擺脫-col-*和使用類.form-inline或`.form-horizo​​ntal將更好地爲您工作。