引导网格给出黑线答案

【问题标题】：Bootstrap grid gives black line引导网格给出黑线
【发布时间】：2015-10-05 00:07:04
【问题描述】：

我刚开始使用 Bootstrap。根据我的阅读，这段代码应该可以毫无问题地执行：

HTML

<div class="container">
    <div class="row">
        <div id="page" class="col-sm-12 col-md-10 col-md-offset-1  col-lg-8 col-lg-offset-2 ">
            <div id="header"></div>
            <div id="article"></div>
            <div id="footer"></div>
        </div>
    </div>
</div>

当 col-lg 时我得到一条黑线，而 md 到 sm 我得到全屏。

CSS

#page {
    background: black;
    width: auto;
    height: 500px;
}

Width: auto 应该覆盖整个 lg-grid 大小。为什么会有 10-20px 的竖线，当我缩小页面时它变成了全屏？

在col-sm-12 期间，它应该覆盖整个页面。但在col-md 期间，它应该在开始时有 1 个网格线偏移，10 个黑色网格线和 1 个空网格线。而在col-lg期间，2格偏移，8格黑，2格空。

我知道容器有一些预设值，但它不应该影响 12 格系统。

提前谢谢你。

【问题讨论】：

标签： html css twitter-bootstrap grid

【解决方案1】：

不要给列指定宽度。他们有已经，来自 Bootstrap 计算宽度。这是网格系统的核心，也是它响应速度快的原因。

如果你想让某些东西给出宽度或高度，请在内 col：

<div class="container">
    <div class="row">
        <div class="col-...">
            <div id="page">
                <div id="header"></div>
                <div id="article"></div>
                <div id="footer"></div>
            </div>
        </div>
    </div>
</div>

【讨论】：

【解决方案2】：

您正面临问题，因为您使用 id #page 为 col-* 应用了宽度的 css:auto。但是对于某些断点，bootstrap 对于每个 col-* 都有一个固定的宽度以进行响应。因此，由于您的“宽度：自动”它不适用于大于 767 像素的视口宽度，这就是为什么您只会得到“一条黑线”。

当视口小于 768px 时，bootstrap 会从所有 col-* 中删除宽度，这会变成全宽，这就是为什么您会为较小的屏幕/窗口/视口获得全黑 div。

我不确定我是否能够很好地解释它。所以，如果你还有疑问。只是评论。

【讨论】：