为何Bootstrap容器切换container与container-fluid时过渡动画失效？

你遇到的问题核心在于Bootstrap中这两个容器类的CSS属性差异，导致过渡动画无法正常计算：

• container类在不同屏幕断点下会设置具体的max-width值（比如桌面端是1140px），同时保持width:100%
• container-fluid类的width:100%，但默认没有设置max-width（属性值为none）

CSS过渡动画只能在数值型属性值之间生效，当你从container切换到container-fluid时，max-width会从一个具体数值变成none——这个变化无法被浏览器计算出过渡的中间状态，所以容器的动画失效了；而列的width是基于百分比的数值变化，因此能正常过渡。

我们可以通过自定义CSS覆盖container-fluid的默认行为，让它的max-width为100%（数值型值），同时确保container的max-width在所有断点下都能支持过渡。

步骤1：修改自定义CSS #

保留你原来的.animation类，再添加以下覆盖样式：

.animation {
  flex-grow: 1;
  transition: all 400ms ease;
  -webkit-transition: all 400ms ease;
  -moz-transition: all 400ms ease;
  -o-transition: all 400ms ease;
}

/* 覆盖Bootstrap的container-fluid，设置max-width为100% */
.animation.container-fluid {
  max-width: 100%;
}

/* 确保container的max-width在所有断点都能过渡 */
@media (min-width: 576px) {
  .animation.container {
    max-width: 540px;
  }
}
@media (min-width: 768px) {
  .animation.container {
    max-width: 720px;
  }
}
@media (min-width: 992px) {
  .animation.container {
    max-width: 960px;
  }
}
@media (min-width: 1200px) {
  .animation.container {
    max-width: 1140px;
  }
}

步骤2：保持原有JS逻辑 #

你代码中切换容器类的逻辑不需要修改，只要确保容器元素始终带有.animation类即可。

这样修改后，container和container-fluid的max-width就都是数值型的值，浏览器能计算出过渡的中间状态，容器的平滑动画就能正常工作了。

如果你不想覆盖Bootstrap的默认类，也可以用自定义容器类来实现更灵活的控制：

.custom-container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
  transition: max-width 400ms ease;
}

.custom-container.normal {
  max-width: 1140px; /* 可根据断点调整适配不同屏幕 */
}

.custom-container.fluid {
  max-width: 100%;
}

然后在JS中切换normal和fluid这两个自定义类，避免和Bootstrap默认样式冲突。

内容的提问来源于stack exchange，提问作者user3626386