Bootstrap 4折叠面板切换时表单宽度异常变化问题

我来帮你搞定这个折叠面板切换时表单宽度跳动的问题——我之前也踩过类似的布局坑，根源其实很清晰：你的表单容器没有固定的宽度约束，导致浏览器会根据内部内容的变化重新计算容器宽度，于是就出现了展开/收起时的宽度波动。

下面给你几个实用的解决方案，按优先级排序：

方法1：给表单容器设置固定最大宽度（推荐） #

直接给包裹表单的那个带边框的div添加max-width和width:100%的样式，这样容器在小屏幕上会自适应全屏，大屏幕则被限制在设定的最大宽度内，彻底避免内容变化导致的宽度跳动：

<div class="p-4 mt-sm-4 mb-sm-4 border border-light" style="border-width: .2rem !important; max-width: 900px; width: 100%;">

你可以根据自己的需求调整max-width的数值（比如800px或者1000px），找到最适合的宽度。

方法2：改用Bootstrap内置容器类 #

Bootstrap的container/container-md这类容器类自带响应式宽度约束，把你外层的自定义容器换成它们，能快速稳定布局：

<!-- 替换原来的d-flex和内部容器 -->
<div class="container d-flex justify-content-center mt-2">
  <div class="mt-sm-4 mb-sm-4 p-4 border border-light" style="border-width: .2rem !important; width: 100%;">
    <!-- 表单内容放在这里 -->
  </div>
</div>

这种方法不用自己写自定义样式，完全利用Bootstrap的内置样式，兼容性更好。

方法3：约束折叠面板内容的宽度 #

如果不想修改外层容器，也可以给折叠面板的内容强制设置100%宽度，确保展开时内容不会撑大父容器：

.collapse.show {
  width: 100%;
}

这个方法适合不想改动外层布局的场景，但优先级不如前两种彻底。

另外补充一句：你贴的代码里没包含折叠面板的部分，但核心逻辑就是让表单容器的宽度不随内部内容变化而改变，上面的方法都能解决这个问题。

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