Bootstrap 列在折叠时垂直堆叠答案

【问题标题】：Bootstrap Columns stacked vertically on collapseBootstrap 列在折叠时垂直堆叠
【发布时间】：2019-10-10 23:22:17
【问题描述】：

我有一个非常简单的引导布局，我最近添加了一个按钮来显示一个包含一些列的折叠行。

折叠/显示效果很好，但是行内的那两列像行一样垂直堆叠，我不知道为什么。

当我移除折叠的东西时，它们会按预期彼此相邻放置。

有人知道如何解决这个问题吗？

<div class="row">
  <div class="col-lg my-3">
    <a class="collapse-div" href="#collapseRow" data-toggle="collapse" aria-expanded="false" aria-controls="collapseRow">
      SHOW
    </a>
  </div>
</div>

<div class="row collapse" id="collapseRow">
  <div class="col-lg-2">
    <div class="row">
      <div class="col-lg">
        TEXT
      </div>
    </div>
    <div class="row">
      TEXT
    </div>
    <div class="row font-14 p-1">
      TEXT
    </div>
    <div class="row font-14 p-1">
      TEXT
    </div>
    <div class="row font-14 p-1">
      TEXT
    </div>
  </div>

  <div class="col-lg-2">
    <div class="row">
      <div class="col-lg">
        TEXT
      </div>
    </div>
    <div class="row">
      TEXT
    </div>
    <div class="row font-14 p-1">
      TEXT
    </div>
    <div class="row font-14 p-1">
      TEXT
    </div>
    <div class="row font-14 p-1">
      TEXT
    </div>
  </div>
</div>

【问题讨论】：

imgur.com/a/HYxqhO8

标签： twitter-bootstrap collapse

【解决方案1】：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<div class="row">
  <div class="col-lg my-3">
    <a class="collapse-div" href="#collapseRow" data-toggle="collapse" aria-expanded="false" aria-controls="collapseRow">
      SHOW
    </a>
  </div>
</div>

<div class="row collapse" id="collapseRow">
  <div class="col-lg-2">
    <div class="row">
      <div class="col-lg">
        TEXT
      </div>
    </div>
    <div class="row">
      TEXT
    </div>
    <div class="row font-14 p-1">
      TEXT
    </div>
    <div class="row font-14 p-1">
      TEXT
    </div>
    <div class="row font-14 p-1">
      TEXT
    </div>
  </div>

  <div class="col-lg-2">
    <div class="row">
      <div class="col-lg">
        TEXT
      </div>
    </div>
    <div class="row">
      TEXT
    </div>
    <div class="row font-14 p-1">
      TEXT
    </div>
    <div class="row font-14 p-1">
      TEXT
    </div>
    <div class="row font-14 p-1">
      TEXT
    </div>
  </div>
</div>

【讨论】：

...这应该是一个code-sn-p...引导程序包括在内，正如我所说的一切都正常工作。只是崩溃的东西不是
您正在测试什么屏幕尺寸？