默认情况下，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中，将一个“in”类添加到您的可折叠div

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

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

Answer 3

将类in添加到ID为collapse1的面板中，如下所示

＆＃13;

＆＃13;

<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>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<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 in">
        <div class="panel-body">First round details</div>

    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

你可以使用一些是删除窗口加载的类

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="/action_page.php">
  <label> First name:</label>
  <input type="text" id="fname" class="form-control">
  <br>
  <label>first pan:</label>
  <input type="text" id="fpan" class="form-control">
  <br>
  <label> First name:</label>
  <input type="text" id="sname" class="form-control">
  <br>
  <label>first pan:</label>
  <input type="text" id="span" class="form-control">
  <br>
  <label> First name:</label>
  <input type="text" id="tname" class="form-control">
  <br>
  <label>first pan:</label>
  <input type="text" id="tpan" class="form-control">
  <br>
  <br>
  <input type="button" value="Submit" id="Submit">
</form>

Answer 5

在手风琴下添加[closeOthers] =“ true” 和手风琴组下的[isOpen] =“ true”

Answer 6

FieldType1 -> … -> FieldTypeN -> TypeName