Bootstrap +简单形式复选框网格

我有一个列表,我想在4列复选框中显示20多个标签,但我不太清楚最干净的方法。 我有以下形式:

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


如果您摆脱<div class="controls span2">列元素并将span2类添加到label元素,则label将具有设置的宽度并向左浮动。 这将导致复选框与网格对齐。

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

通过将span10类添加到容器元素,可以强制网格为四列:

<div class="control-group span10">

但是,这将导致网格向左 - >向右流动,然后创建新的行而不是垂直堆叠的连续元素。 我认为有垂直堆叠元素的唯一方法是使用多列布局功能。 我之前没有使用过,我实际上并不知道它在各种浏览器中的工作情况。

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

链接地址: http://www.djcxy.com/p/66953.html

上一篇: Bootstrap + simple form checkbox grids

下一篇: How to hash an int[] in c#