Question

我有一个div，我想充当全角标头。基本上，标题，也许是电话号码和地址。这个问题的目的是使这个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。默认情况下，它具有有限的最大宽度，因为大多数页面在某些时候想要停止扩展。

您可以将容器元素设置为： .element { @include外容器（100％）; }

但是有些人认为它可能会在更大的屏幕尺寸下出现（想想19“加moniters），所以你可能想让max width参数比正常情况更大（比如2000px或其他东西），但不是100％。

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

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

1 个答案: