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元素的总宽度，它必须是一个容器流体