Question

我正在建立一个需要pinterest风格主页的网站。（但只有3列宽，使用col-lg-4引导类折叠为2列然后是1列）。

我搜索并找到了许多如何做到这一点的选项。但是，

我不想在我的css中指定列宽（我希望它继承引导列的宽度）
我不想使用新的css3列布局（缺少较旧的浏览器支持）
我不想在PHP中这样做，因为它以不正确的顺序堆叠。

我已经改编了一些代码来自https://gist.github.com/justincarroll/5959773，它使用砌体来推动块并且非常接近我想要的，除了当它堆叠时，它看起来不像普通的那样好bootstrap row + col span stack。

我希望它能够堆栈以及引导程序可以堆栈，（动态增加和减小列大小）我希望它将内容集中在中间（目前它将所有框堆叠并推送到留在较小的屏幕上）。

我并不担心如何实际设置盒子的样式......这不是这个问题范围的一部分，我只需要帮助你如何推/拉盒子以便它们工作得很好并且调整好！

我是css和js的菜鸟，所以如果您对如何改进此代码有任何建议，请告诉我。

在这里摆弄它： http://jsfiddle.net/rDdcT/

以下代码

<body>
<div class="container">
    <div id="pin-outer">
        <div class="col-lg-4 pin pin-inner"> <a href="/">
                   <img src="http://www.placehold.it/300x400&text=ONE" class="img-responsive">

                    <p class="post-title">Title One</p>
                    <p class="post-snippet">
                        This is a post about title one. 
                    </p>
                </a>

        </div>
        <div class="col-lg-4 pin pin-inner"> <a href="/">
                   <img src="http://www.placehold.it/300x400&text=TWO" class="img-responsive">

                    <p class="post-title">Title TWO</p>
                    <p class="post-snippet">
                        This is a post about title two. 
                    </p>
                </a>

        </div>
        <div class="col-lg-4 pin pin-inner"> <a href="/">
                   <img src="http://www.placehold.it/300x400&text=THREE" class="img-responsive">

                    <p class="post-title">Title three</p>
                    <p class="post-snippet">
                        This is a post about title three. 
                    </p>
                </a>

        </div>
        <div class="col-lg-4 pin pin-inner"> <a href="/">
                   <img src="http://www.placehold.it/300x400&text=ONE" class="img-responsive">

                    <p class="post-title">Title Four</p>
                    <p class="post-snippet">
                        This is a post about title four. 
                    </p>
                </a>

        </div>
        <div class="col-lg-4 pin pin-inner"> <a href="/">
                   <img src="http://www.placehold.it/300x400&text=FIVE" class="img-responsive">

                    <p class="post-title">Title five</p>
                    <p class="post-snippet">
                        This is a post about title five. 
                    </p>
                </a>

        </div>
    </div>
</div>
</body>

JS

//mutated from https://gist.github.com/justincarroll/5959773

// Load is used to ensure all images have been loaded, impossible with document

jQuery(window).load(function () {



// Takes the gutter width from the bottom margin of .pin-inner

var gutter = parseInt(jQuery('.pin-inner').css('marginBottom'));
var container = jQuery('#pin-outer');



// Creates an instance of Masonry on #pin-outer

container.masonry({
    gutter: gutter,
    itemSelector: '.pin-inner',
    columnWidth: '.pin-inner'
});



// This code fires every time a user resizes the screen and only affects .pin-inner elements
// whose parent class is .container-fluid. Triggers resize so nothing looks weird.

jQuery(window).bind('resize', function () {
    if (jQuery('#pin-outer').parent().hasClass('container-fluid')) {



        // Resets all widths to 'auto' to sterilize calculations

        post_width = jQuery('.pin-inner').width() + gutter;
        jQuery('.container-fluid #pin-outer, body > .container-fluid').css('width', 'auto');



        // Calculates how many .pin-inner elements will actually fit per row. Could this code be cleaner?

        pin - outer_per_row = jQuery('#pin-outer').innerWidth() / post_width;
        floor_pin - outer_width = (Math.floor(pin - outer_per_row) * post_width) - gutter;
        ceil_pin - outer_width = (Math.ceil(pin - outer_per_row) * post_width) - gutter;
        pin - outer_width = (ceil_pin - outer_width > jQuery('#pin-outer').innerWidth()) ? floor_pin - outer_width : ceil_pin - outer_width;
        if (pin - outer_width == jQuery('.pin-inner').width()) pin - outer_width = '100%';



        // Ensures that all top-level .container-fluid elements have equal width and stay centered

        jQuery('.container-fluid #pin-outer, body > .container-fluid').css('width', pin - outer_width);
        jQuery('body > .container-fluid').css({
            'margin': '0 auto'
        });



    }
}).trigger('resize');



});

CSS

    .pin {
        margin: 0 0 50px;
        text-align: left;
        width: 330px;
    }
    .pin img {
        border-bottom: 1px solid #ccc;
        padding-bottom: 15px;
        margin-bottom: 5px;
    }
    .pin p {
        font-size : 12px;
        color: #333;
        margin: 0;
        text-decoration: none;
    }
    .pin:hover {
        opacity: 0.4;
        text-decoration: none;
    }

Answer 1

是否有特殊原因需要使用col-lg- *？因为col-lg- *类处理大屏幕尺寸的元素。您可以使用bootstrap 3提供的其他类，如col-md- ，col-sm - 和col-xs- *，以准确指定不同视图端口大小中所需的列数。因此，如果您希望div在大屏幕中为4列宽，则分配col-lg-4，如果您希望它在中等大小的屏幕中为6列，那么您可以将col-md-6类分配给相同的div 。像这样：

<div class="col-lg-4 col-md-6">
</div>

当然你可以使用pull和push类来移动你的列。 Bootstrap documentation在表格中对此进行了总结。希望有所帮助，因为我不知道为什么你只需要使用col-lg-4。

Answer 2

HTML

<div class="container container-fluid">

CSS

.pin {
    margin: 0 0 0px;
    text-align: left;
    width: auto;
 }

这将让您决定使用bootstrap col-md类所需的列数。 col-md-3用于四列网格，col-md-4用于3列网格。

Pinterest风格布局（Bootstrap 3 + Masonary）最终推文

2 个答案:

Pinterest风格布局（Bootstrap 3 + Masonary）*最终推文*

2 个答案:

Pinterest风格布局（Bootstrap 3 + Masonary）最终推文