波旁整洁网格 12 列不起作用

Question

我正在尝试使用 bourbon 整洁的网格，并试图让两列并排 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>

我有以下 css 来自我的自定义 scss

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

Answer 1

我找到了解决办法。如果有人想知道并且可以提供帮助。它需要添加 omega 属性。所以波本威士忌需要 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。

波旁整洁网格 12 列不起作用

bourbon neat grid 12 column not working

grid

bourbon

neat