Bourbon Neat Grid，在移动断点处答案

【问题标题】：Bourbon Neat Grid, at mobile breakpointBourbon Neat Grid，在移动断点处
【发布时间】：2014-06-15 06:28:09
【问题描述】：

我有一个非常基本的网站，它使用 sass 和 bourbon 整洁的网格框架。我试图达到与 (http://neat.bourbon.io/examples/) 网站相同的效果。在 800 像素宽度处，网格似乎有一个断点并删除跨度列并转到 100% 宽度。

下面的代码输出一个包装器和两个 4 和 8 跨度 div。当我将浏览器缩小到 300 像素时，仍会保留网格，并且标题和内容 div 不会中断并全宽 100%。

我怎样才能达到这个效果？我已经尝试将 div 默认设置为 100%，并在断点处添加跨度列，但这不起作用。谢谢。

.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>

【问题讨论】：

标签： sass bourbon neat

【解决方案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)
  }
}

【讨论】：