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

Question

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

TT4*_*M.C 1 css ruby-on-rails neat bourbon

我有一个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>

Run Code Online (Sandbox Code Playgroud)

header.html.erb

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

Run Code Online (Sandbox Code Playgroud)

header.css.scss

.contain-header {
    @include outer-container;

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

Run Code Online (Sandbox Code Playgroud)

意见

当我删除@include outer-container它似乎我已达到预期的效果.但是,所有的文档都说使用它outer-container.我不想要不可预测的行为,因为我是Bourbon Neat的新手.

Answer 1

小智 5

你需要设置$max-width`@ outer-container'.默认情况下,它具有有限的最大宽度,因为大多数页面在某些时候想要停止扩展.

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

但是有些人认为它可能会在更大的屏幕尺寸上下降(想想19"加上moniters),所以你可能想让最大宽度参数比正常情况更大(比如2000px或其他东西),但不是100%.

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

归档时间：	10 年，9 月前
查看次数：	4254 次
最近记录：	9 年，7 月前