Twitter Bootstrap - столбцы/столбцы столбцов в форме

У меня есть поле формы, которое имеет несколько флажков - как я могу отображать флажки как 3 столбца вместо 1?

Что-то похожее на это:

enter image description here

Я попытался добавить div/span в строке <div class="controls">, но, похоже, добавляет левое дополнение.

Я знаю, что в документах есть встроенный флажок, но элементы не выровнены.

Ответы

Ответ 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 Check
        </label>
        <label class="checkbox">
            <input type="checkbox" value="option2" id="inlineCheckbox2"> Diner 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/