Bootstrap“崩溃”正在打破网格布局

Question

我正在尝试在引导程序中创建一个可折叠的行。我把它排成一行，这样这一行就有三列（即col-xx-4）。当包含它们的行没有折叠时（即该行中有三列），这些列将根据 Bootstrap 网格系统排列。

但是，一旦我添加了折叠属性，它们就会破坏网格结构，并且每列占据一整行，就好像它是 col-xx-12。出于某种原因，每个列 div 不是在同一行上对齐，而是在左侧和右侧生成两个相等宽度的边距，它们占据了整个行宽，就像它们是 col-xx-12，尽管它们是 col-xx-4。

为了提供上下文，每列 div 宽度设置为 100px，行宽为 330px，这为给定 col-xx-4 属性的行内的所有三个 div 列提供了足够的空间。然而，当我添加“折叠”时自动生成的边距使得列不在同一行内水平对齐，而是垂直对齐，每列占据一整行。

过去有没有人遇到过类似的问题？添加“折叠”可能会破坏网格结构是否有原因？

Answer 1

试试这样：

<div class="collapse" id="collapseExample">
  <div class="row">
     <div class="col-xx-4"></div>.....
  </div>
</div>