Bootstrap row/columns 默认不折叠？

Question

我用谷歌搜索并尝试了一些不同的方法来确定在我的各种 div 中添加 "collapse" class 的位置，但我没有找到任何东西特定于折叠行。

我有一些代码如下所示：

<div id="test" class="collapse">
<div class="row" style="display: flex; overflow: hidden;">
<div class="col-md-2">
<div class="col-md-10">
     Text
</div>
</div>
</div>
</div>

（我认为）是折叠的适当数据-*属性：

<a class="btn btn-default btn-dropdown" data-target="#test" data-toggle="collapse"><i class="fa fa-bars"></i></a>

然而，每当我点击时，"collapse" 需要大约 2 次尝试才能真正存在（这意味着我可以折叠 in/out），更重要的是，默认情况下它不会显示为折叠.使用 flex 容器时我是否遗漏了什么，或者我如何使用 bootstrap 中的折叠内容？

我试过将折叠移动到不同的元素，但无济于事。我错过了什么吗？

如果需要，我可以 post 更完整的代码，为了简单起见，我只有框架。

Answer 1

给你一个解决方案https://jsfiddle.net/sw2bnzeq/

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<a class="btn btn-default btn-dropdown" data-target="#test" data-toggle="collapse">
  <i class="fa fa-bars"></i>
</a>
<div id="test" class="collapse">
  <div class="row" style="display: flex; overflow: hidden;">
    <div class="col-md-2">
      Text
    </div>
  </div>
</div>

我猜你可能错过了 jQuery 或 bootstrap.min.js

Answer 2

该代码工作正常，所以您的代码中有其他内容导致它默认不折叠。

https://www.codeply.com/go/F7glxbJxGA

<a class="btn btn-default btn-dropdown" data-target="#test" data-toggle="collapse"><i class="fa fa-bars"></i></a>
<div id="test" class="collapse">
    <div class="row" style="display: flex; overflow: hidden;">
        <div class="col-md-2">
            <div class="col-md-10">
                Text
            </div>
        </div>
    </div>
</div>

Bootstrap row/columns 默认不折叠？

Bootstrap row/columns are not collapsed by default?

javascript

css

twitter-bootstrap

angular-ui-bootstrap