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>

我在自定义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%;

块的视图-TV-导向块-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属性。因此，bourbone需要omega来定义行中的最后一行。

在我的情况下，我将omega添加到第二个div，如下所示：

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

你会发现移动第一种方法的另一个问题coz omega也将应用于更广泛的屏幕。一种解决方案是在此处使用omega-reset。但这不是优雅的解决方案。基本上你要添加一个属性并再次删除黑客。

更优雅的解决方案是使用互斥的媒体查询作为建议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列不起作用

1 个答案: