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

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

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

Bootstrap +简单形式复选框网格

1 个答案: