CODEWITHSUNDEEP
ruby-on-railscsssasstwitter-bootstrap
noob
noob

Reputation: 1807

multi-column using bootstrap and rails

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

Upvotes: 0

Views: 2890

Answers (2)

Riley Guerin
Riley Guerin

Reputation: 305

I'm currently working on a helper to do this for rails, im extracting from the following code:

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

and 

.span4.show-small

i think i did my mods correct there...

Upvotes: 0

ellawren
ellawren

Reputation: 947

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.

Upvotes: 2

Related Questions