css – Bootstrap简单形式复选框网格

前端之家收集整理的这篇文章主要介绍了css – 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/,但我想将逻辑限制在包装器CSS而不是手动修改HTML.

解决方法

如果你摆脱< div class =“controls span2”>列元素并将span2类添加标签元素,标签将具有设置宽度并将向左浮动.这将使复选框与网格对齐.
<label class="checkBox span2">
    <input type="checkBox" value="option1"> Cash
</label>

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

<div class="control-group span10">

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

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

猜你在找的CSS相关文章