Bootstrap / Masonry 列宽问题答案

【问题标题】：Bootstrap / Masonry column width issuesBootstrap / Masonry 列宽问题
【发布时间】：2016-01-09 19:48:14
【问题描述】：

我将每列设置为 col-xs-4，但它会出错并删除第三列。我的代码是这样的：

$(document).ready(function () {
var $container = $('.products');

$container.imagesLoaded(function () {
    $container.fadeIn(300);
    $container.masonry({
        itemSelector: '.product_image',
        isAnimated: true
    });
});
});

而我的html是这样的：

<div class="product_image col-xs-4"><img class="img-responsive img-rounded" src="/photos/1014919_10101744331352953_8981394028326535000_o.jpg"></div>

【问题讨论】：

为什么容器的定位是绝对内联样式？
这是砌体对它的作用。这不是我应用的 CSS。

标签： jquery css twitter-bootstrap masonry

【解决方案1】：

您为什么使用 position:absolute ？这是错误的方法，要在引导程序中嵌套 cols 始终使用 "row" 这样

<div class="col-xs-12">
  <div class="row">
     <div class="col-xs-4"></div>
     <div class="col-xs-4"></div>
     <div class="col-xs-4"></div>
  </div>
</div>

但再次在 col-xs-4 中，您将手机屏幕分为 3 col，因此更喜欢使用 col-md-4 col-sm4 col-xs-12

【讨论】：

这是砌体对它的作用。这不是我应用的 CSS。