css - 网格列未正确显示

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 media($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

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

尝试这个：

.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*/
    }
  }
}

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