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

如果没有看到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未嵌套在另一个div span-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*/
    }
  }
}

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

网格列无法正确显示

2 个答案: