Twitter Bootstrap - 表单中的复选框列/列答案

【问题标题】：Twitter Bootstrap - checkbox columns / columns within formTwitter Bootstrap - 表单中的复选框列/列
【发布时间】：2013-10-27 00:31:50
【问题描述】：

我有一个包含多个复选框的表单域 - 如何将复选框显示为 3 列而不是 1 列？

类似的东西：

我尝试在 <div class="controls"> 中添加行/跨度 div，但它似乎添加了左填充。

我知道文档中有内联复选框示例，但元素未对齐。

【问题讨论】：

标签： twitter-bootstrap

【解决方案1】：

您可以通过分隔 .control-group 容器中的复选框块来实现这样的设置，而不是像这样分隔每个 .control 容器：

<div class="control-group">
    <p class="pull-left">Payment Types</p>
    <div class="controls span2">
        <label class="checkbox">
            <input type="checkbox" value="option1" id="inlineCheckbox1"> Cash
        </label>
        <label class="checkbox">
            <input type="checkbox" value="option2" id="inlineCheckbox2"> Invoice
        </label>
        <label class="checkbox">
            <input type="checkbox" value="option3" id="inlineCheckbox3"> Discover
        </label>
        <label class="checkbox">
            <input type="checkbox" value="option3" id="inlineCheckbox3"> Financing
        </label>
    </div>
    <div class="controls span2">
        <label class="checkbox">
            <input type="checkbox" value="option1" id="inlineCheckbox1"> Check
        </label>
        <label class="checkbox">
            <input type="checkbox" value="option2" id="inlineCheckbox2"> American Express
        </label>
        <label class="checkbox">
            <input type="checkbox" value="option3" id="inlineCheckbox3"> MasterCard
        </label>
        <label class="checkbox">
            <input type="checkbox" value="option3" id="inlineCheckbox3"> Google Checkout
        </label>
    </div>
    <div class="controls span2">
        <label class="checkbox">
            <input type="checkbox" value="option1" id="inlineCheckbox1"> Traveler's Check
        </label>
        <label class="checkbox">
            <input type="checkbox" value="option2" id="inlineCheckbox2"> Diner's Club
        </label>
        <label class="checkbox">
            <input type="checkbox" value="option3" id="inlineCheckbox3"> Visa
        </label>
        <label class="checkbox">
            <input type="checkbox" value="option3" id="inlineCheckbox3"> Paypal
        </label>
    </div>
</div>

演示：http://jsfiddle.net/LVFzK/468/show/

【讨论】：

Andres，似乎 .form-horizontal 导致 .controls 有一个左填充。你有什么建议？
@RS7 您可以改用.form-vertical 类，这不是每个文档所必需的。演示：jsfiddle.net/LVFzK/1
@RS7 更脏的方法是用表单上的 id 覆盖左边距，如下所示：jsfiddle.net/LVFzK/2，我创建了一个 #form-custom id 并将其添加到表单容器中，然后以.control 类为目标以删除它添加的 160 像素，我将其重置为网格中的默认 20 像素。
@AndresIlich 您的演示中的复选框jsfiddle.net/LVFzK 没有按列排列。我错过了什么吗？
@codecowboy 我使用了引导程序站点中的样式表，该样式表在编写此答案后已更改。这是一个带有工作样式表的更新小提琴：jsfiddle.net/LVFzK/468/show