Bootstrap 4 引导容器在每个断点通道上扩展和收缩

我有一个页眉，一个内容区和一个页脚作为flex项目的页面。为了使页脚保持在屏幕底部，我给内容区设置了类

flex-grow-1

在内容区域内，结构是：

container>row>col-md-8/col-md-4

我的期望是，包装上述所有内容的容器将在小视口中附着到边缘，并随着其变大而增加边距

小视口：

|container|

|  container  |

较大视口：

|container|

|  container  |

等等

但实际情况是，当它穿过每个断点（sm | md | lg | xl）时，它会不断收缩和扩张。这很难描述，所以你必须亲自看看：

• 慢慢向左或向右调整浏览器窗口的大小，并观察如何调整 所有容器都会正常工作

这就是我正在经历的奇怪的效果：

|container|          # small viewport
|  container  |
|    container    |
| container |          # medium viewport
|  container  |
|    container    |
| container |          # large viewport
|  container |
|    container    |

正如您在Codepen演示中看到的，页面中的所有其他容器（如页眉和页脚）也会发生这种情况。我没有覆盖引导中的任何内容

---

我需要了解为什么会发生这种情况，这样我才能解决它。这是一个Symfony应用程序，使用网页包Encore来管理资产。Bootstrap是通过Thread安装的，驻留在我的项目的node_模块中。这是程序包：。我正在导入Bootstrap的/dist/css/Bootstrap.css及其JavaScript。

发生这种情况是因为

容器根据媒体查询断点具有不同的最大宽度

从bootstrap.css中：

.container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

因此，实现所需的最简单方法是使用
.container fluid
并在其上设置一个
max width

.container-fluid {
  max-width: 992px;
}

演示：
未看到您的编辑。但这正是我想要的。非常感谢。这是引导程序容器的预期行为。我不知道Symfony的事。