3

I'm working on a dynamic album art grid with CSS and Bootstrap 3 and everything works fine, when all images are scaled 1:1. But when an image occurs that is not scaled like that, my grid breaks. Here is a screenshot of my problem:

Screenshot

But what I want is

The code to generate the grid looks like this:

<div class="row">
    <div class="col-md-6 panel panel-default" v-for="result in results">
        <img src="{{ result.art }}" />
        <strong>{{ result.title }}</strong>
        <br />
        from <strong>{{ result.album }}</strong>
        <br />
        by <strong>{{ result.artist }}</strong>
    </div>
</div>

I'm using Vue.js for this template.

So I can't place such two col-md-6 into one row, but when I chain the columns the grid is breaking.

Is there any way to get a correct grid with these kind of images? I don't need something like masonry-style, just a regular bootstrap grid.

Thanks for your help! :)

  • have you tried `
    ` after each `col-md-6` ?
     – M.Tanzil Jun 27 '16 at 16:12
  • Please post a **minimal working example** of your code (HTML/CSS/JS) in a [Snippet](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/). See [mcve] and [ask]. – vanburen Jun 27 '16 at 16:20
  • @M.Tanzil method will work as well and you can do this with :before / :after pseudo class with nth-child selector. – Derek Bess Jun 27 '16 at 16:27

2 Answers2

2

You need to add something every 2 col-md-6 to ensure the left floats clear..

One way is to use Bootstrap's clearfix reset, another way is to use a CSS reset like this..

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

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

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
1

There are a few ways to achieve this.

Wrap each row into it's own row

<div class="row">
<div class="col-md-6>Content</div>
<div class="col-md-6>Content</div>
</div>

You can also set a min-height for each item, that way they will always be the same height.

Lastly, you can not use the bootstrap grid system and build your own grid by using display: inline-block; just be sure to set negative margin on each element and v-align to top.

Hope this helps :P

Derek Bess
  • 222
  • 2
  • 10