1

我有一个要用作全角标题的 div。基本上，标题，可能还有电话号码和地址。这个问题的目的是使这个 div 成为浏览器的整个宽度。

波旁整洁的新手

  • 我的印象是它适用于 12 格列
  • 所以让一个 div 占据我使用的浏览器的整个宽度@include span-columns(12)
  • 当我在浏览器中查看时，看起来左右两侧有 2 个空列

application.html.erb

<!DOCTYPE html>
<html>
<head>
  <title>LawRails</title>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>
</head>
<body>
<%= render "layouts/header" %>
<%= yield %>

</body>
</html>

header.html.erb

<div class="contain-header">
<div class = "last-names">Attorney & Attorney</div>
</div>

header.css.scss

.contain-header {
    @include outer-container;

    .last-names {
        background: blue;
        @include span-columns(12);
    }
}

观察

当我删除@include outer-container时，似乎我已经达到了预期的效果。但是，所有文档都说要使用 this outer-container。我不希望出现不可预测的行为，因为我是 Bourbon Neat 的新手。

4

1 回答 1

5

您需要设置$max-width`@outer-container'。默认情况下，它的最大宽度是有限的，因为大多数页面都希望在某个时候停止扩展。

您可以将容器元素设置为： .element { @include outer-container(100%); }

但在某些时候，它可能会在更大的屏幕尺寸（想想 19 英寸加显示器）上落下，所以你可能想让最大宽度参数比正常值更大（比如 2000 像素或其他东西），但不是 100%。

整洁的文档链接http://thoughtbot.github.io/neat-docs/latest/#outer-container（检查参数部分）

于 2015-01-29T18:33:21.317 回答