2

Using Rails with bootstrap I'm trying to layout a page which will have an unknown number of blocks of content on it. On small screens there should be 1 column, on medium screens 2 columns, and on larger screens 3 columns.

Such as...

enter image description here

However I can't work out how to slice up the content so it works reliably. Currently I have this in my view :

<div class="container">
  <% @posts.each_slice(3)  do |posts| %>
    <div class="row">
    <% posts.each  do |post| %>
      <div class="col-sm-6 col-lg-4">
        <img src="<%= post.image %>" class="img-responsive">
        <h2><%= post.title %></h2>
        <h6><%= post.created_at.strftime('%b %d, %Y') %></h6>
        <p> <%= raw(post.body).truncate(358) %></p>
      </div>
    <% end %>
    </div>
  <% end %>
</div>

But this produces...

enter image description here

I've tried changing the each_slice(3) and class="col-sm-6 col-lg-4" however regardless of the combinations I choose one of the medium or large views breaks.

How do I reliably achieve the desired effect above regardless of the number of items on the page?

dwkns
  • 2,369
  • 4
  • 22
  • 35
  • Box 4 is getting bumped down because either box three is a little too wide, or box 2 is too high and so the layout is breaking. If you set a hard limit on height for those boxes does the layout then look the way you want it to? – Rockwell Rice Nov 25 '16 at 14:24
  • Not if it solves the problem ;-) Within each block there will be an image (responsive), a title, a date then a chunk of text. The chunk of text will be truncated if too long. The text block however can be a fixed height meaning that each content block can be a fixed height. – dwkns Nov 25 '16 at 14:24
  • Setting the height doesn't make a difference. – dwkns Nov 25 '16 at 14:35
  • http://www.bootply.com/hL0Q7I9kmy – dwkns Nov 25 '16 at 14:49
  • Yeah.. the text content makes the columns different heights. – Carol Skelly Nov 25 '16 at 14:51

1 Answers1

3

When the content of the columns is the same height, the grid wraps evenly: http://www.codeply.com/go/8w2INqz3e1

When the content of the columns is different heights, the grid wraps unevenly, causing gaps.. http://www.codeply.com/go/1LBtvtDnzA

To fix this, you need to use responsive resets as described in this answer..

Bootstrap row with columns of different height

For example, a CSS clearfix approach in your case would work like this..

@media (min-width: 1200px) {
    .row > .col-lg-4:nth-child(3n+1) {
        clear: left;
    }
}

@media (max-width: 992px) {
    .row > .col-sm-6:nth-child(2n+1) {
        clear: left;
    }
}

http://www.codeply.com/go/LDqxBlyULr

Community
  • 1
  • 1
Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
  • 1
    Actually the real problem was that I was creating multiple rows rather than just one.http://www.bootply.com/hL0Q7I9kmy When i create just one row, then the height issue crops up. But it has given me a solution. Thanks. – dwkns Nov 25 '16 at 14:51