我正在使用 Bootstrap ' List group ' 我需要让它响应。 意味着在移动 View 中,列表将显示为像导航栏一样的下拉按钮。
我试过导航类,但没有按预期工作。 代码:
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#side-menu-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<ul class="list-group collapse navbar-collapse" id="#side-menu-collapse">
<li class="list-group-item dropdown-toggle">Cras justo odio</li>
<li class="list-group-item dropdown-toggle">Dapibus ac facilisis in</li>
<li class="list-group-item dropdown-toggle">Morbi leo risus</li>
<li class="list-group-item dropdown-toggle">Porta ac consectetur ac</li>
<li class="list-group-item dropdown-toggle">Vestibulum at eros</li>
</ul>
最佳答案
您可以通过一些媒体查询来做到这一点。当屏幕尺寸与 XS
不同时覆盖 collapse
类。
Bootstrap :https://www.bootply.com/L5BYCOwsZG
CSS:
@media screen and (min-width: 768px) {
.custom-collapse .collapse {
display:block;
}
}
HTML:
<div class="custom-collapse">
<button class="collapse-toggle visible-xs " type="button" data-toggle="collapse" data-parent="custom-collapse" data-target="#side-menu-collapse">
<span class="">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<ul class="list-group collapse" id="side-menu-collapse">
<li class="list-group-item dropdown-toggle">Cras justo odio</li>
<li class="list-group-item dropdown-toggle">Dapibus ac facilisis in</li>
<li class="list-group-item dropdown-toggle">Morbi leo risus</li>
<li class="list-group-item dropdown-toggle">Porta ac consectetur ac</li>
<li class="list-group-item dropdown-toggle">Vestibulum at eros</li>
</ul>
</div>
关于css - 如何使 Bootstrap 'List group' 响应,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22295201/