Bourbon Neat - 外部容器不是浏览器的全宽答案

【问题标题】：Bourbon Neat -- outer-container not full width of browserBourbon Neat - 外部容器不是浏览器的全宽
【发布时间】：2015-01-29 18:12:15
【问题描述】：

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

波旁整洁的新手

我的印象是它适用于 12 格列
所以我使用@include span-columns(12) 让一个 div 占据浏览器的整个宽度
当我在浏览器中查看时，看起来左右两边各有 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 时，似乎我已经达到了预期的效果。但是，所有docs 都说要使用这个outer-container。我不希望出现不可预测的行为，因为我是 Bourbon Neat 的新手。

【问题讨论】：

标签： css ruby-on-rails bourbon neat

【解决方案1】：

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

您可以将容器元素设置为：。元素 { @include 外部容器（100%）； }

但在某些时候它可能会在更大的屏幕尺寸（想想 19 英寸加显示器）上下降，因此您可能希望将最大宽度参数设置为比正常值更大的值（如 2000 像素或其他值），但不是 100%。

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

【讨论】：