Question

I am using bootstrap-sass, formtastic-bootstrap, rails 3.2, and ruby 1.9.3p0 on a new project. I want create a multi-column form and multi-column media grid for the list of products. Code below. I used two separate methods. The first is using the row < .span for the form and the second is by adding my own multi-column css code to the media-grid and that’s not working either. Help?

First method on form:

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

Second method on media-grid:

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

Here’s the code for the multi-column css:

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

Help…

Answer 1

Do you have a float:left on anything in there? I was just playing around with a multi-column thing in Twitter Bootstrap today and noticed that that broke it.