波旁整洁网格 12 列不工作答案

【问题标题】：bourbon neat grid 12 column not working波旁整洁网格 12 列不工作
【发布时间】：2015-07-29 10:36:19
【问题描述】：

我正在尝试使用波旁整齐的网格，并尝试以 8:4 的比例并排放置两列 但第二个 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>

我的自定义 scss 中有以下 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 中显示如下：块主页特色英雄

 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>

【问题讨论】：

标签： grid bourbon neat

【解决方案1】：

我找到了解决方案。如果有人想知道并且可以提供帮助。它需要添加 omega 属性。所以 bourbone 需要 omega 来定义行中的最后一个 div。

在我的例子中，我将 omega 添加到第二个 div，如下所示：

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

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

更优雅的解决方案是使用相互排斥的媒体查询，如建议 here 一个例子是

$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);
  }
}

这样，我不使用 omega-reset。

【讨论】：