正常（垂直）窗體內部形式與Twitter的引導水平

Question

我想有一個窗體有一個水平佈局的第一層，但然後在一行可以有一個形式「內聯」，我想有垂直（默認）佈局。有沒有簡單的方法來實現這一目標？

注意：.form-inline不會做我在找的東西，因爲它不會將內部標籤放在輸入頂部。

到目前爲止，我有這樣的事情：

<div class="form-horizontal"> 
    <div class="control-group"> 
     <label class="control-label"> 
      outer label 
     </label> 
     <div class="controls ### SOMETHING TO CLEAR/OVERRIDE form-horizontal ###"> 
      ### INLINE FORM WITH SAME STRUCTURE IS HERE ### 
     </div> 
    </div> 
</div> 

Answer 1

自舉不能在默認情況下做到這一點，但我已經在我的叉子列入本https://github.com/jasny/bootstrap/blob/master/less/jasny-forms.less#L40

請考慮使用Jasny的擴展來引導http://jasny.github.com/bootstrap

或使用此CSS

.form-vertical .form-horizontal .control-group > label { 
    text-align: left; 
} 
.form-horizontal .form-vertical .control-group > label { 
    float: none; 
    padding-top: 0; 
    text-align: left; 
} 
.form-horizontal .form-vertical .controls { 
    margin-left: 0; 
} 
.form-horizontal .form-vertical.form-actions, 
.form-horizontal .form-vertical .form-actions { 
    padding-left: 20px; 
} 
.control-group .control-group { 
    margin-bottom: 0; 
} 

隨着HTML

<form class="form-horizonal"> 
    # Horizal controls here 

    <div class="form-vertical"> 
     <div class="control-group"> 
      <label class="control-label">Label</label> 
      <div class="controls">Something here</div> 
     </div> 
    </div> 
</form> 

Answer 2

我不確定你到底在找什麼，但我試圖猜測。

我用兩條垂直線做了一個窗體，第二條線有多個表單元素。

我用內聯塊來做到這一點。

http://jsbin.com/icoduh/1/edit

Answer 3

這裏是@ jasny-阿諾德丹尼爾斯CSS更新的自舉3.在3 形式的基團取代控制組，形式控制取代控制。還需要@ user9645的寬度變化。新的CSS是：

.form-vertical .form-horizontal .form-group > label { 
    text-align: left; 
} 
.form-horizontal .form-vertical .form-group > label { 
    float: none; 
    padding-top: 0; 
    text-align: left; 
    width: 100% 
} 
.form-horizontal .form-vertical .form-control { 
    margin-left: 0; 
} 
.form-horizontal .form-vertical.form-actions, 
.form-horizontal .form-vertical .form-actions { 
    padding-left: 20px; 
} 
.form-group .form-group { 
    margin-bottom: 0; 
} 

Answer 4

你不需要編寫自定義CSS自舉3.不要把你的類形式水平的表單標籤，只放一個包裝DIV與周圍的形式類你想要水平的元素（並支持水平項的列大小類）。

例如，這會工作：

<form> 
    <div class="form-horizontal"> 
    <div class="form-group"> 
     <label class="col-sm-2 control-label">I'm a horizontal form element</label> 
     <div class="col-sm-10"> 
     <input type="text" class="form-control"> 
     </div> 
    </div> 
    </div> 

    <div class="form-group"> 
    <label>I'm a vertical form element</label> 
    <input type="text" class="form-control"> 
    </div> 
</form> 

這工作，因爲垂直形式自動用於無類明確說明的形式。在文檔here中可以看到「缺少班級」。