Bootstrap 3.4 中的容器流体未水平拉伸 100%

Question

我遇到了与上一个问题相同的问题：div doesn't expand all the way horizontally

我的render() 函数中只有

render() {
    return (
        <div className="container intro-body">
        </div>
    )

intro-body 的 CSS 就像这样（用于颜色）

.intro-body {
    height: 582px;
    background-color: #3BC5C3;
}

在 13 英寸 Macbook 上全屏显示时，左右两侧为空白。似乎有某种填充或边距。

但是当我将窗口缩小到大约一半大小时，它会到达左右两侧

有人能解释一下这个奇怪的现象吗？这是 Bootstrap 中我不知道的东西吗？有人告诉我使用 container-fluid 但 1。我认为它已在 Bootstrap 3 和 2 中删除。我尝试时它没有用。

Answer 1

如果您查看bootstrap source，您会看到.container 对每个媒体断点都有固定宽度，除了超小型设备，.container-fluid 对所有媒体断点都有完整宽度：

.container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}
@media (min-width: 768px) {
    .container {
        width: 750px;
    }
}
@media (min-width: 992px) {
    .container {
        width: 970px;
    }
}
@media (min-width: 1200px) {
    .container {
        width: 1170px;
    }
}
.container-fluid {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

因此，如果您想为每个媒体断点设置全角，请使用.container-fluid。

Answer 2

第一件事：你必须放一个重置css链接（它必须是第一个）。你可以在这里找到一个：http://meyerweb.com/eric/tools/css/reset/ 然后如果你想让容器匹配一个 div 元素的总宽度，它必须是一个容器流体