2

我有一个非常基本的网站，它使用 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>
4

1 回答 1

1

You must specify breakpoints in order to accomplish that. Just @include Neats media($your_settings) and you're ready to go, read more here. Something like this: 

.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)
  }
}
于 2014-06-15T11:00:48.183 回答