轴网列显示不正确

Question

我使用的是波旁威士忌。我在网格设置中设置了一些断点，对于移动版本，我设置了4个断点，如下所示：

$mobile: new-breakpoint(max-width 480px 4);

我设置了左右两个容器，比如左边3个，右边1个；像这样：

.demo
{
  @include outer-container;
  .leftContainer
  {
    @include span-columns( 6 );
    background-color:crimson;
    @include media($mobile) { 
      @include span-columns( 3 of 4);
    }
  }
  .rightContainer
  {
    @include span-columns( 6 );
    background-color:blue;
  }
  @include media($mobile) { 
    @include span-columns( 1 of 4 );
  }
}

但不知何故，容器相互堆叠，而不是跨越3列和1列。我做错了什么？

Answer 1

如果不看到HTML，很难判断，但.rightContainer代码似乎是最重要的。第二个@include媒体（$mobile）｛｝在.rightContainer｛｝之外

试试这个：

.demo{
  @include outer-container;
  .leftContainer {
    @include span-columns( 6 );
    background-color:crimson;
    @include media($mobile) { 
        @include span-columns( 3 of 4);
    }
  }
  .rightContainer{
    @include span-columns( 6 );
    background-color:blue;
    @include media($mobile) { 
        @include span-columns( 1 of 4 );
    }
  }
}

Answer 2

您使用的是@include span-columns(3 of 4)，但.leftContainer和.rightContainer没有嵌套在具有span-columns()的另一个div中，因此不应将父级的列作为参数传递。

试试这个：

.demo{
  @include outer-container;
  .leftContainer {
    @include span-columns( 6 );
    background-color:crimson;
    @include media($mobile) { 
        @include span-columns(3); /*Change this line*/
    }
  }
  .rightContainer{
    @include span-columns( 6 );
    background-color:blue;
    @include media($mobile) { 
        @include span-columns(1); /*and this one*/
    }
  }
}

也许您可以查看此文档以获得更多帮助。