Html 砌体不适用于不同宽度的支柱3

相同宽度立柱的精细砌体工程（3-3-3-3、4-4-4、6-6等）。 但不同宽度列（8-4、9-3等）不起作用（布局打断）

请看截图。我正在努力实现这个布局

标记：

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

---

另一个人问了同样的问题，我在使用Bootstrap和Mashise时发现Mashise似乎不喜欢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：

我希望这对你有帮助

$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;  
        }
      }
    }
  }
}