我正在构建一个需要pinterest风格主页的网站。（但只有3列宽，使用col-lg-4引导类向下折叠为2列，然后折叠为1列）。
我已经搜索并找到了许多关于如何做到这一点的选项。然而，
-
我不想在css中指定列宽（我希望它继承引导程序列宽）
-
我不想使用新的css3列布局（因为缺乏旧的浏览器支持）
-
我不想在PHP中做这件事，因为它的堆叠顺序不正确。
我改编了一些代码https://gist.github.com/justincarroll/5959773它使用砖石来推动块，并非常接近我想要的，只是当它堆叠时，它似乎不如正常的引导行+列-跨堆叠工作。
我希望它能像bootstrap一样堆叠，可以堆叠（动态地增加和减少列大小），并且我希望它将内容居中（目前它堆叠并将所有框推到较小屏幕上的左侧）。
我不担心如何真正设计盒子。。。这不是这个问题的范围，我只需要帮助如何推动/拉动框，使它们工作良好，并调整大小！
我是一个拥有css和js的noob，所以如果你对如何改进这段代码有任何建议，请告诉我。
Ps：在我的小提琴里，它似乎没有降到2列，但在我当地的主持人身上，我做到了。。。不知道我在哪里搞砸了。
在这里摆弄它：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;
}
是否有特殊原因需要使用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类来移动列。引导程序文档在表格中对此进行了总结。希望这能有所帮助，因为我不知道你为什么只需要使用col-lg-4。
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。