砌体不适用于不同宽度的 bootstrap3 列答案

【问题标题】：Masonry not working with different width columns of bootstrap3砌体不适用于不同宽度的 bootstrap3 列
【发布时间】：2015-09-02 18:35:49
【问题描述】：

砌体适用于相同宽度的列（3-3-3-3、4-4-4、6-6 等）。但不适用于不同宽度的列（8-4、9-3 等）（布局中断）。

请看截图。我正在尝试实现这个http://prntscr.com/8bu4lr 布局。

标记：

<div class="container"> 
<div class="masonry-container row"> 
    <!-- ITEM -->
    <div class="masonry-item  col-xs-12 col-sm-8"> 
    </div><!-- /.masonry-item -->                       

    <!-- ITEM -->
    <div class="masonry-item col-xs-12 col-sm-4 "> 
    </div><!-- /.masonry-item -->   

    <!-- ITEM -->
    <div class="masonry-item col-xs-12 col-sm-4 "> 
    </div><!-- /.masonry-item -->       


</div><!-- /.row -->

//init masonry
$('.masonry-container').masonry({
  // options
  columnWidth: '.masonry-item',
  itemSelector: '.masonry-item',
});

另一个人问了同样的问题here

【问题讨论】：

标签： html css twitter-bootstrap masonry

【解决方案1】：

我在使用 Bootstrap 和 Masonry 时发现，Masonry 似乎并不喜欢 Bootstrap 的网格系统。我根本无法让它与他们的网格一起工作，所以我决定将它剥离到绝对基础，包括宽度。然后，即使使用不同大小的列，它对我来说也非常好。

这是我与 Masonry 一起使用的精简网格系统：

$breakpoints: (xs, sm, md, lg);
$calculation: '';

@each $breakpoint in $breakpoints {

  @for $i from 1 through 12 {

    $calculation: 0% + ($i * 100 / 12);

    .masonry-#{$breakpoint}-#{$i} {

      @if $breakpoint == 'xs' {
        width: $calculation;
      }
      @else if $breakpoint == 'sm' {

        @media screen and (min-width: 768px) {
          width: $calculation;  
        }
      }
      @else if $breakpoint == 'md' {

        @media screen and (min-width: 992px) {
          width: $calculation;  
        }
      }
      @else if $breakpoint == 'lg' {

        @media screen and (min-width: 1200px) {
          width: $calculation;  
        }
      }
    }
  }
}

如果您不使用 sass，您可以轻松使用此在线转换器立即获取输出的 CSS：

http://sassmeister.com/

希望对你有所帮助。

【讨论】：