Twitter Bootstrap - 表单中的复选框列/列 [英] Twitter Bootstrap - checkbox columns / columns within form

问题描述

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

类似的东西:

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

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

解决方案

您可以通过分离 .control-group 容器中的复选框块而不是每个 .control 来实现这样的设置 容器如下:

<p class="pull-left">付款类型</p><div class="controls span2"><label class="checkbox"><input type="checkbox" value="option1" id="inlineCheckbox1">现金<label class="checkbox"><input type="checkbox" value="option2" id="inlineCheckbox2">发票<label class="checkbox"><input type="checkbox" value="option3" id="inlineCheckbox3">发现<label class="checkbox"><input type="checkbox" value="option3" id="inlineCheckbox3">融资
<div class="controls span2"><label class="checkbox"><input type="checkbox" value="option1" id="inlineCheckbox1">查看<label class="checkbox"><input type="checkbox" value="option2" id="inlineCheckbox2">美国运通<label class="checkbox"><input type="checkbox" value="option3" id="inlineCheckbox3">万事达<label class="checkbox"><input type="checkbox" value="option3" id="inlineCheckbox3">谷歌结账

<div class="controls span2"><label class="checkbox"><input type="checkbox" value="option1" id="inlineCheckbox1">旅行支票<label class="checkbox"><input type="checkbox" value="option2" id="inlineCheckbox2">晚餐俱乐部<label class="checkbox"><input type="checkbox" value="option3" id="inlineCheckbox3">签证<label class="checkbox"><input type="checkbox" value="option3" id="inlineCheckbox3">贝宝

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

I have a form field which has a number of checkboxes - how can I display the checkboxes as 3 columns instead of 1?

Something similar to this:

I've tried adding a row/span divs inside the <div class="controls"> but it seems to be adding a left padding.

I know there is the inline checkbox example in the docs but elements aren't aligned.

解决方案

You can achieve such a setup by separating the checkbox blocks within the .control-group container instead of each .control container like so:

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

Demo: http://jsfiddle.net/LVFzK/468/show/

这篇关于Twitter Bootstrap - 表单中的复选框列/列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！