Bourbon Neat -- outer-container 不是浏览器的全宽

Question

我有一个 div，我想充当 full-width header。基本上，标题和 phone 号码和地址。这个问题的目的是让这个 div 成为浏览器的全宽。

Bourbon Neat 的新手

我的印象是它适用于 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 时，我似乎已经达到了预期的效果。但是，所有 docs 都说要使用这个 outer-container。我不希望出现不可预测的行为，因为我是 Bourbon Neat 的新手。

Answer 1

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

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

但从某种意义上说，它可能会在更大的屏幕尺寸（想想 19" 加显示器）下显得不那么合适，所以您可能希望将最大宽度参数设置为比正常值大一些（例如 2000px 或其他），但不是 100 %.

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

Bourbon Neat -- outer-container 不是浏览器的全宽

Bourbon Neat -- outer-container not full width of browser

css

ruby-on-rails

bourbon

neat