Bootstrap“Collapse”打破了网格布局

Question

我正在尝试在bootstrap中创建一个可折叠的行。我把它排成一行，这一行有三列（即col-xx-4）。当包含它们的行未折叠时（即行中有三列），这些列按照Bootstrap网格系统排列。

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

要提供上下文，每个列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>