列不适合网格答案

【问题标题】：columns not fitting into grid列不适合网格
【发布时间】：2013-01-31 22:37:06
【问题描述】：

我刚开始使用指南针蓝图，我正在制作一个简单的框架，其中包含以下内容：

$blueprint_grid_columns: 12;
$blueprint_grid_width: 60px;
$blueprint-grid-margin: 20px;

@import "blueprint";

.frame {
  @include container;
  .header{
    @include column(12);
    background:#000;
    height:100px;
  }
  .left_bar{
    @include column(1);
    background:#ccc;
    height:450px;
  }
  .content{
    @include column(10);
    background: #000;
    height:450px;
  }
  .right_bar{
    @include column(1);
    backgrounf:#ccc
    height:450px;
  }
}

HTML：

<body>
  <div class='frame'>

    <div class='header'>
    </div> <!-- end header -->

    <div class='left_bar'>
    </div> <!-- end left_bar -->

    <div class='content'>
    </div> <!-- end content -->

    <div class='right_bar'>  
    </div> <!-- end right_bar -->

  </div> <!-- end frame -->
</body>

right_bar 不适合最后一列的空间，而是恰好出现在 left_bar 下方。谁能告诉我为什么？非常感谢任何帮助。

【问题讨论】：

标签： compass-sass blueprint-css

【解决方案1】：

我认为您必须将 true 添加到 header 和 right_bar 类：

.header{
  @include column(12, true);

....
.right_bar{
  @include column(1, true);

这让指南针知道它是最后一列，并且需要将边距归零。

【讨论】：

为了扩展这个问题，我想在内容 div 中有 3 个区域（left_content、middle_content 和 right_content）。内容 div 有 10 列，所以我给嵌套的 div 分配了 2+6+2。我对 right_content 有同样的问题。添加 true 作为 arg 没有区别。这是因为它是嵌套的吗？

【解决方案2】：

我想通了。我添加了一些边框，使网格有点失控。我通过覆盖宽度来修复它，但它似乎有点 hacky。是否有考虑边界的蓝图方法？

【讨论】：