Question

我有一个非常基本的网站，使用sass和bourbon整洁的网格框架。我试图达到与（http://neat.bourbon.io/examples/）网站相同的效果。在宽度为800px的情况下，网格似乎有一个断点并使跨度列下降并达到100％宽度。

下面的代码输出一个包装器和两个4和8跨度div。当我使浏览器变小甚至低至300px时，网格仍然保留，标题和内容div不会中断并且全宽100％。

我怎样才能达到这个效果？我已经尝试将div设置为100％默认情况下和at断点添加span-columns但这并不起作用。感谢。

.wrapper {
@include outer-container;
.title {@include span-columns(4);}
.content {@include span-columns(8);}
}

<div class="wrapper">
<div class="title"></div>
<div class="content"></div>
</div>

Answer 1

您必须指定断点才能实现此目的。只需@include Neats media($your_settings)并且您已准备就绪，请阅读更多here。像这样：

.wrapper {
  @include outer-container; 

  .title {
    @include span-columns(4);

    @include media(max-width 300px) {
      @include span-columns(12); // or whatever you need for 100% width
    }
  }

  .content {
    @include span-columns(8)
  }
}

Bourbon Neat Grid，移动断点

1 个答案: