网格列未正确显示

Question

我正在使用 Bourbon Neat。我在网格设置中设置了一些断点，对于移动版本我设置了 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

您正在使用@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*/
    }
  }
}

也许您可以查看 this documentation 以获得更多帮助。

Answer 2

如果不查看 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 );
    }
  }
}