As several posts on the forums shows, the regular Bootstrap is not working properly when the height is different for the posts. As the other topics says, using Masonry Script solves this problem.
I have used Masonry earlier with no problem, but the problem appears when I have started using Types Layouts.
It turns out this should be solved in the late 2015, so I am sure I am doing something wrong.
With no use of Masonry it turns out like the first screenshot.
I am then using the following:
<div class="container luft">
<div class="col-md-12">
<div class="row">
<?php the_ddlayout('default-layout'); ?>
</div>
</div>
</div>
[wpv-layout-start]
[wpv-items-found]
<!-- wpv-loop-start -->
<wpv-loop>
<div class="col-md-3 col-sm-6 luft">
<div class="col-sm-12 maximg nopadding maximg">
[wpv-post-featured-image size="post_thumb"]
</div>
<div class="clearfix"></div>
<div class="padding lefttext color1 whitetext">
<h1 class="twentyfive lefttext nomarginbottom">[wpv-post-taxonomy type='kunstner' format='name']</h1>
<h2 class="nomargintop color2text semibold">[wpv-post-title]</h2>
<div class="col-sm-6 nopadding">
<a href="[wpv-post-url]" class="btn btn-small btn-small btn-outline-fill-color2 displayblock" role="button" title="[wpv-post-title]" onmouseover="this.title='';">[types field="solgt" option="1" state="checked"]Solgt[/types][types field="solgt" option="1" state="unchecked"]kr. [types field='pris'],-[/types]</a>
</div>
<div class="col-sm-6 nopadding">
<a href="[wpv-post-url]" class="btn btn-small btn-fill-color2 displayblock" role="button" title="[wpv-post-title]" onmouseover="this.title='';">Les mer</a>
</div>
<div class="clearfix"></div>
</div>
</div>
</wpv-loop>
<!-- wpv-loop-end -->
[/wpv-items-found]
[wpv-no-items-found]
<strong>[wpml-string context="wpv-views"]No items found[/wpml-string]</strong>
[/wpv-no-items-found]
[wpv-layout-end]
When I include Masonry I do the following:
<div class="container masonry-container luft">
<div class="col-md-12">
<div class="row">
<?php the_ddlayout('default-layout'); ?>
</div>
</div>
</div>
(function( $ ) {
var $container = $('.masonry-container');
$container.imagesLoaded( function () {
$container.masonry({
columnWidth: '.col-md-3',
percentPosition: true,
itemSelector: '.col-md-3'
});
});
})(jQuery);
[wpv-layout-start]
[wpv-items-found]
<!-- wpv-loop-start -->
<wpv-loop>
<div class="col-md-3 col-sm-6 luft">
<div class="col-sm-12 maximg nopadding maximg">
[wpv-post-featured-image size="post_thumb"]
</div>
<div class="clearfix"></div>
<div class="padding lefttext color1 whitetext">
<h1 class="twentyfive lefttext nomarginbottom">[wpv-post-taxonomy type='kunstner' format='name']</h1>
<h2 class="nomargintop color2text semibold">[wpv-post-title]</h2>
<div class="col-sm-6 nopadding">
<a href="[wpv-post-url]" class="btn btn-small btn-small btn-outline-fill-color2 displayblock" role="button" title="[wpv-post-title]" onmouseover="this.title='';">[types field="solgt" option="1" state="checked"]Solgt[/types][types field="solgt" option="1" state="unchecked"]kr. [types field='pris'],-[/types]</a>
</div>
<div class="col-sm-6 nopadding">
<a href="[wpv-post-url]" class="btn btn-small btn-fill-color2 displayblock" role="button" title="[wpv-post-title]" onmouseover="this.title='';">Les mer</a>
</div>
<div class="clearfix"></div>
</div>
</div>
</wpv-loop>
<!-- wpv-loop-end -->
[/wpv-items-found]
[wpv-no-items-found]
<strong>[wpml-string context="wpv-views"]No items found[/wpml-string]</strong>
[/wpv-no-items-found]
[wpv-layout-end]
Please see provided screenshot of this.
So close. Everything works very well, except that there is a 3 columns space empty on the right side. Looking into the code with Inspect I found this:
<div class="container masonry-container">
<div class="col-md-12">
<div class="row">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-12">
<div class="col-md-3 col-sm-6">
... Here comes the content
</div>
</div>
</div>
</div>
</div>
< /div>
< /div>
So could it be an issue that all the containers, rows and so on are being added?
Related posts:
https://toolset.com/forums/topic/bugsconflicts-between-masonry-and-views-1-11-1/
https://toolset.com/forums/topic/conflicts-between-views-1-11-1-and-masonry-jquery-script/
https://toolset.com/documentation/user-guides/view-layouts-101/
https://toolset.com/forums/topic/masonry-grid/
To sum it up the problem is that Bootstrap does not fix the grid when columns have unequal heights out of the box. Therefor Masonry must be included.
Looking forward to hear from you again,