使用Bootstrap将一种形式的复选框划分为两列或三列

Question

我的表格中装满了Bootstrap复选框。但是，我想把它分成两列或三列，所以不要占用很多行。 这是我的代码：

<div class="jumbotron">
    {section name=x loop=$records}
            {section name=y loop=$records[x]}
              <div class="checkbox">
                <label>
                    <input type="checkbox" name={$records[x][y].prefkey} {if   $records[x][y].prefval == "on"}checked{/if}>
                    {$records[x][y].prefkey}
                </label>
              </div>
            {/section}
    {/section}
</div>

请任何帮助!!

Answer 1

只需将<div class="checkbox"></div>打包到div col-*-4的div中，即可获得3列，col-*-6可获得2列。

Reference to docs

<强> JSFiddle Example

<强>更新

添加以下css以避免jumbotron的问题：

.jumbotron{
    overflow:hidden
}

<强> JSFiddle Example