默认情况下,Bootstrap uncollapsed面板

Question

我有一个可折叠的面板,但我希望它默认情况下是未折叠的.

<div class="panel panel-default">
    <div class="panel-heading">
        <h4 class="panel-title">
            <a data-toggle="collapse" href="#collapse1">
                <span class="glyphicon glyphicon-collapse-down"> </span>1st Round</a>
        </h4>
    </div>
    <div id="collapse1" class="panel-collapse collapse">
        <div class="panel-body">First round details</div>

    </div>
</div>

如果我删除崩溃从

<div id="collapse1" class="panel-collapse collapse">

它工作,但第一次点击取消折叠不起作用.

Answer 1

在Bootstrap 3.x中,向您的可折叠div添加一个"in"类

<div id="collapse1" class="panel-collapse collapse in">

默认情况下它会保持你的div打开.

更新:

使用Bootstrap 4.0,您需要添加show类来代替in.

Answer 2

使用 Boostrap 4，只需添加类show即可在页面加载时显示折叠的内容：

<div class="collapse show">...</div>

根据Bootstrap 4 文档：

• .collapse 隐藏内容
• .collapse.show 显示内容