3根不同大小的圆柱

3根不同大小的圆柱

本文介绍了砖石和靴子3-3根不同大小的圆柱的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我已经与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根不同大小的圆柱的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-31 04:21