css - Bootstrap + 简单表单复选框网格

Question

我有一个包含 20 多个标签的列表，我想在 4 列复选框网格中显示，但我不太确定最简洁的方法是什么。我有以下表格:

= simple_form_for(@fracture) do |f|
  = f.error_notification    
  .form-inputs
    = f.input :title
    = f.input :summary
    = f.input :tag_list, :as => :check_boxes, :collection => ActsAsTaggableOn::Tag.all.map(&:name), :item_wrapper_class => 'inline'

生成的表单应该是这样的 http://jsfiddle.net/LVFzK/ ，但我希望将逻辑限制在 wrapper 或 CSS 中，而不是手动修改 HTML。

Answer 1

如果你去掉 <div class="controls span2">列元素并添加 span2类到 label元素，label将有一个设定的宽度并向左浮动。这将使复选框与网格对齐。

<label class="checkbox span2">
    <input type="checkbox" value="option1"> Cash
</label>

您可以通过添加 span10 来强制网格为四列容器元素的类:

<div class="control-group span10">

但是，这将导致网格从左到右流动，然后创建新行而不是垂直堆叠连续元素。我认为垂直堆叠元素的唯一方法是使用 multi-column layout functionality .我以前没有用过它，我实际上不知道它在各种浏览器中的效果如何。

这jsFiddle显示了两种方法，每种方法都具有静态宽度或流动宽度。