Question

我将每个列设置为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>

Answer 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-md-4 col-sm4 col-xs-12

Bootstrap / Masonry列宽问题

1 个答案: