javascript - Bootstrap 3.4 中的容器流体未水平拉伸(stretch) 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;
}

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