Bootstrap：垂直形式內的水平字段

Question

我想在Bootstrap的「垂直樣式」形式內有一些「水平樣式」字段。

我該怎麼做（如果可能的話）？

Answer 1

您可以利用Bootstrap的現有類（checkbox.inline）獲得您要查找的效果。以使它看起來正確的，關鍵是要在標籤上註明padding-left: 0px;：

<div class="control-group"> 
    <div class="controls"> 
     <label class="checkbox inline" style="padding-left: 0px;" for="inputColor">Favorite Color <input type="text" id="inputColor" class="span2" /></label> 
     <label class="checkbox inline" style="padding-left: 0px;" for="inputNColor">Next Color <input type="text" id="inputNColor" class="span2" /></label> 
    </div> 
    </div> 

請參閱http://jsfiddle.net/jhfrench/Hzucn/的工作示例。

我試着爲你創建一個新類（沿着.controls-row label.inline { padding-left: 0px;}的方向，所以你不必在元素上做樣式，但是它會比我預期的產生更多的衝突，所以如果你打算使用這個解決方案普遍地，你可能要投入時間去解開那......

Answer 2

您可以使用類似的格式來引導.form-horizo​​ntal實現。 （滾動播種水平形式在這裏：http://twitter.github.com/bootstrap/base-css.html#forms）

包裝標籤和表單元素分組divs（這是什麼.control-group在自舉中的水平表單佈局）。

浮標留在顯示他們與領域水平對齊。

label.horizontal { 
    float: left; 
    width: 160px; 
    padding-top: 5px; 
    margin-right: 20px; 
    text-align: right; 
} 

在上述示例中，與類.horizo​​ntal標籤將被「水平樣式」，其餘的「垂直」或默認形式佈局。

Answer 3

還有一類是準備在引導使用

檢查這個例子：

<div class="span6"> 
    <form> 
    <div class="controls controls-row"> 
     <input id="name" name="name" type="text" class="span3" placeholder="Name"> 
     <input id="email" name="email" type="email" class="span3" placeholder="Email address"> 
    </div> 

    <div class="controls"> 
    <textarea id="message" name="message" class="span6" placeholder="Your Message" rows="5"></textarea> 
    </div> 

    <div class="controls"> 
    <button id="contact-submit" type="submit" class="btn btn-primary input-medium pull-right">Send</button> 
    </div> 

    </form> 
</div>