默认情况下,Bootstrap行/列不会折叠?

时间:2017-07-27 16:08:30

标签: javascript css twitter-bootstrap angular-ui-bootstrap

我已经google了一下,尝试了几个不同的东西,在哪里添加"崩溃"在我的各个div中上课,但我还没有找到任何特定于折叠行的内容。

我有一些看起来像这样的代码:

<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>

但是,每当我点击时,&#34;崩溃&#34;大约需要2次尝试。实际存在(意味着我可以折叠进/出),更重要的是,默认情况下它不会显示为折叠状态。使用flex容器时是否存在我缺少的东西,或者我是否正在使用bootstrap中的崩溃内容?

我试图将崩溃移动到不同的元素无济于事。我错过了什么吗?

如果有必要,我可以发布更完整的代码,为了简单起见,我只是拥有骨架。

2 个答案:

答案 0 :(得分:0)

您可以使用解决方案https://jsfiddle.net/sw2bnzeq/

&#13;
&#13;
<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>
&#13;
&#13;
&#13;

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

答案 1 :(得分:0)

代码工作正常,因此代码中的其他内容会导致默认情况下不会折叠代码。

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>