Question

砌体在相同宽度的柱子上工作正常（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

Answer 1

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

这是我用于砌体的剥离网格系统：

$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/

我希望这可以帮助你。

砌体不使用bootstrap3的不同宽度列

1 个答案: