Bootstrap 4.0.0 Collapse导致Row内Col堆叠问题咨询

嘿，这个问题我之前帮人排查过，其实不是Bootstrap的bug，是个很容易踩的小细节～

问题原因 #

你直接把.collapse类加在.row上时，会破坏Bootstrap Grid系统的核心布局逻辑：

• 默认情况下，.row是display: flex的弹性容器，.col-md-3依赖这个弹性布局实现并排排列
• 而.collapse类的默认样式会给元素加上display: none；当展开时，组件会把元素的display设为block（而不是恢复原来的flex）
• 这就导致展开后的.row变成了块级元素，里面的.col-md-3失去了弹性容器的约束，自然会变成块级元素堆叠起来

这并不是“无法折叠row或复杂元素”，只是要注意collapse作用的对象不能破坏原有布局的依赖关系。

可行的解决方案 #

方案1：把Collapse放在Row的外层容器上（最推荐）

这是最符合Bootstrap设计思路的方法，让collapse控制外层容器的显示隐藏，而row始终保持弹性布局：

<!-- 触发按钮 -->
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseContainer">
  展开/折叠按钮组
</button>

<!-- 外层collapse容器 -->
<div class="collapse" id="collapseContainer">
  <div class="row mt-3">
    <div class="col-md-3">
      <button class="btn btn-block btn-secondary">按钮1</button>
    </div>
    <div class="col-md-3">
      <button class="btn btn-block btn-secondary">按钮2</button>
    </div>
    <div class="col-md-3">
      <button class="btn btn-block btn-secondary">按钮3</button>
    </div>
    <div class="col-md-3">
      <button class="btn btn-block btn-secondary">按钮4</button>
    </div>
  </div>
</div>

方案2：自定义CSS恢复Row的Flex布局

如果你一定要把.collapse直接加在.row上，可以通过CSS强制展开时恢复flex布局：

/* 当collapse展开时，让row保持flex布局 */
.collapse.show.row {
  display: flex !important;
}

对应的HTML结构：

<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseRow">
  展开/折叠按钮组
</button>

<div class="row collapse mt-3" id="collapseRow">
  <div class="col-md-3">
    <button class="btn btn-block btn-secondary">按钮1</button>
  </div>
  <!-- 其他列... -->
</div>

总结 #

两种方案都能解决问题，优先选方案1，因为它不会修改Bootstrap的默认样式，避免后续出现其他兼容性问题。

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