Question

我在新项目中使用bootstrap-sass，formtastic-bootstrap，rails 3.2和ruby 1.9.3p0。我想为产品列表创建一个多列表单和多列媒体网格。代码如下。我用了两种不同的方法。第一种是使用行＆lt; .span用于表单，第二个是将我自己的多列css代码添加到媒体网格中，但这也不起作用。帮助

表单上的第一种方法：

<%= semantic_form_for @product do |f| %>
<%= f.inputs do %>

  <div class="row">
    <div class="span8">
      <%= f.input :name %>
      <%= ... %>
    </div>
  </div>

  <div class="row">
    <div class="span8">
      <%= f.input :description %>
      <%= ... %>
    </div>
  </div>
<% end %>
<% end %>

媒体网格的第二种方法：

<div class="row multi-column">
<ul class="media-grid span4">
  <% @products.each do |prod| %>
    <li class="media-grid">
      <div class="well">
        <%= link_to prod.name, prod, :class => "strong" %></br>
        $<%= prod.price %></br>
        <%= prod.available ?  "Available" : "Out of Stock" %>
      </div>
    </li>
  <% end %>
</ul>
</div>

以下是多列css的代码：

.multi-column {
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;}

...帮助

Answer 1

你在那里有什么float:left吗？我今天刚刚在Twitter Bootstrap中玩了一个多列的东西，注意到它打破了它。

Answer 2

我正在为帮助rails做一个帮助，我从以下代码中提取：

- (0..items.size - 1).each do |i|
  - if i % 3 == 0
    \<div class="row">
  =render "items/show_small", item: items.at(i)
  - if i % 3 == 2 || i == items.size - 1
    \</div>

和

.span4.show-small

我想我在那里修正了我的mod ...

使用bootstrap和rails的多列

2 个答案: