波旁整洁的网格12列不工作

Question

我试图使用波旁整洁的网格，并试图以8:4的比例获得两列并排但是第二个div在第一个div下面

<div class="container">
  <section id="content">
    <div id="content-area">
      <div id="block-homepage-homepage-featured-hero" class="block"></div>
      <div id="block-views-tv-guide-block-1" class="block"></div>
    </div>
   </section>
</div>

我有以下自定义css

> #content { @include span-columns(12);
#block-homepage-homepage-featured-hero { @include span-columns(8 of 12); }
#block-views-tv-guide-block-1 { @include span-columns(4 of 12); } }

从layout.sass

 .container
      @include outer-container
      margin-left: auto
      margin-right: auto
      width: auto

查看在firebug中生成的两个块的输出，如下所示:block-homepage-featured-hero

 float: left;
  display: block;
  margin-right: 2.12766%;
  width: 65.95745%;

block-views-tv-guide-block-1

float: left;
  display: block;
  margin-right: 2.12766%;
  width: 31.91489%;

编辑我发现了问题所在。在节内容中有一个额外的div。但却是空的。我无法摆脱它。那么现在的问题是如何将其宽度定义为0，这样它就不会影响列。

<div class="container">
  <section id="content">
    <div id="content-area">
      <div id="block-homepage-homepage-featured-hero" class="block"></div>
      <div id="block-views-tv-guide-block-1" class="block"></div>
      **<div id="extra-empty-dive></div>**
    </div>
   </section>
</div>

Answer 1

我找到了解决方案。如果有人想知道，可以是一个帮助。它需要加上性质。所以bourbone需要omega来定义最后一个div in row

在我的例子中，我在第二个div中添加了omega，如下所示:

#block-views-tv-guide-block-1 { 
  @include span-columns(4 of 12); 
  @include omega()
} 

你会发现移动优先方法的另一个问题，因为omega也将应用于更宽的屏幕。一个解决方案是使用这里建议的omega-reset。但这不是一个优雅的解决方案。基本上你是添加一个属性，并再次删除与hack。

一个更优雅的解决方案是使用互斥媒体查询，就像这里建议的那样例如

$breakpoint1: 360px;
$breakpoint2: 700px;
$medium-viewport: new-breakpoint(min-width $first-breakpoint-value max-width $second-breakpoint-value);
$large-viewport: new-breakpoint(min-width $second-breakpoint-value + 1);
#content {
  @include media($medium-viewport) {
    @include span-columns(8);
    @include omega(1n);
  }
  @include media($large-viewport) {
    @include span-columns(8);
    @include omega(2n);
  }
}