网格列无法正确显示

时间:2014-04-21 01:20:09

标签: css responsive-design sass bourbon neat

我正在使用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列。我做错了什么?

2 个答案:

答案 0 :(得分:3)

如果没有看到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 );
    }
  }
}

答案 1 :(得分:1)

您正在使用@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以获取更多帮助。