Twitter bootstrap 将引导3.x列表组转换为引导4
下面的菜单正在引导4上运行。但是,当我单击列表组项目时,已折叠的项目将不会关闭Twitter bootstrap 将引导3.x列表组转换为引导4,twitter-bootstrap,Twitter Bootstrap,下面的菜单正在引导4上运行。但是,当我单击列表组项目时,已折叠的项目将不会关闭 <div id="menu"> <div class="panel list-group"> <a href="#" class="list-group-item" data-toggle="collapse" data-target="#sm" data-parent="#menu">MESSAGES <span class="label label-info"&g
<div id="menu">
<div class="panel list-group">
<a href="#" class="list-group-item" data-toggle="collapse" data-target="#sm" data-parent="#menu">MESSAGES <span class="label label-info">5</span> <span class="glyphicon glyphicon-envelope pull-right"></span></a>
<div id="sm" class="sublinks collapse">
<a class="list-group-item small"><span class="glyphicon glyphicon-chevron-right"></span> inbox</a>
<a class="list-group-item small"><span class="glyphicon glyphicon-chevron-right"></span> sent</a>
</div>
<a href="#" class="list-group-item" data-toggle="collapse" data-target="#sl" data-parent="#menu">TASKS <span class="glyphicon glyphicon-tag pull-right"></span></a>
<div id="sl" class="sublinks collapse">
<a class="list-group-item small"><span class="glyphicon glyphicon-chevron-right"></span> saved tasks</a>
<a class="list-group-item small"><span class="glyphicon glyphicon-chevron-right"></span> add new task</a>
</div>
<a href="#" class="list-group-item">ANOTHER LINK ...<span class="glyphicon glyphicon-stats pull-right"></span></a>
</div>
Bootstrap3.x是
在Bootstrap4.x中,面板已更改为card。用卡片替换代码中的面板,手风琴将按预期工作
<div id="menu">
<div class="card list-group"> <a href="#" class="list-group-item" data-toggle="collapse" data-target="#sm" data-parent="#menu">MESSAGES <span class="badge badge-info">5</span> <span class="glyphicon glyphicon-envelope float-right"></span></a>
<div id="sm" class="sublinks collapse"> <a class="list-group-item small"><span class="glyphicon glyphicon-chevron-right"></span> inbox</a>
<a class="list-group-item small"><span class="glyphicon glyphicon-chevron-right"></span> sent</a>
</div> <a href="#" class="list-group-item" data-toggle="collapse" data-target="#sl" data-parent="#menu">TASKS <span class="glyphicon glyphicon-tag float-right"></span></a>
<div id="sl" class="sublinks collapse"> <a class="list-group-item small"><span class="glyphicon glyphicon-chevron-right"></span> saved tasks</a>
<a class="list-group-item small"><span class="glyphicon glyphicon-chevron-right"></span> add new task</a>
</div> <a href="#" class="list-group-item">ANOTHER LINK ...<span class="glyphicon glyphicon-stats float-right"></span></a>
</div>