砖石和靴子3-3根不同大小的圆柱 [英] Masonry and Bootstrap 3 - 3 columns of different sizes

问题描述

我已经与Bootstrap和石工进行了超过3-4个小时的战斗，并搜索了大量文章，但找不到解决方案.

I've been fighting with Bootstrap and Masonry for over 3-4 hours now and searched tons of articles but couldn't find the solution.

这是东西:

我有一个看起来像这样的Bootstrap网格:

I have Bootstrap Grid that looks like this:

<div class="itemsContainer">
    <div class="col-md-6 item"></div>
    <div class="col-md-3 item"></div>
    <div class="col-md-3 item"></div>
</div>

总共有12列，如果没有砌筑，它就可以完美地发挥作用. 但是，一旦我包括石工，第三列就会下降.

In total there are 12 columns and without Masonry it works just perfect. But as soon as I include Masonry, the third column drops down.

如果我将其设置为6-6列或4-4-4列和3-3-3-3，则它们可以正常工作，但6-3-3则不起作用.

If I make it 6-6 columns or 4-4-4 columns and 3-3-3-3 they work fine, but 6-3-3 doesn't work.

有人对此有解决方案吗?有什么想法如何拥有这种炫酷的布局吗?我是否必须实施流体网格?为什么Masonry用Bootstrap破坏了?

Does anyone have a solution for it? Any ideas how to have this cool layout? Do I have to implement my fluid grid? Why does Masonry break with Bootstrap?

这是一个JS小提琴，用于说明 https://jsfiddle.net/bePolite/52VtD/11921/embedded/result/

This is a JS fiddle to illustrate https://jsfiddle.net/bePolite/52VtD/11921/embedded/result/

推荐答案

引导网格示例

<div class="container">
    <h1>Divs with same col's</h1>
    <div class="row">
        <div class="col-xs-4 bg1"><p class="lead"> i'm div col-xs-4 </p></div>
        <div class="col-xs-4 bg2"><p class="lead"> i'm div col-xs-4 </p></div>
        <div class="col-xs-4 bg3"><p class="lead"> i'm div col-xs-4 </p></div>
    </div>
    <h1>Divs with differents col's</h1>
    <div class="row">
        <div class="col-xs-6 bg1"><p class="lead"> i'm div col-xs-6 </p></div>
        <div class="col-xs-3 bg2"><p class="lead"> i'm div col-xs-3 </p></div>
        <div class="col-xs-3 bg3"><p class="lead"> i'm div col-xs-3 </p></div>
    </div>
</div>

这将向您显示以下内容:

this will show you like this:

这篇关于砖石和靴子3-3根不同大小的圆柱的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！