twitter-bootstrap – Twitter Bootstrap：多个响应式可折叠导航

发布时间：2020-12-17 20:39:11 所属栏目：安全来源：网络整理

导读：我正在使用Twitter Bootstrap.我希望有两个(或更多)导航,当在移动设备上查看时,会折叠成下拉列表. 这可以在页面上轻松完成一次,但我无法弄清楚如何进行多个响应/可折叠导航. 此代码用于创建一个在移动设备上折叠的导航： a class="btn btn-navbar" data-togg

我正在使用Twitter Bootstrap.我希望有两个(或更多)导航,当在移动设备上查看时,会折叠成下拉列表.

这可以在页面上轻松完成一次,但我无法弄清楚如何进行多个响应/可折叠导航.

此代码用于创建一个在移动设备上折叠的导航：

<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">groups</a>

<div class="nav-collapse">
  <ul class="nav">
    <li><a href="#">Nav Link</a></li>
    <li><a href="#">Nav Link</a></li>
    <li><a href="#">Nav Link</a></li>
    <li><a href="#">Nav Link</a></li>
  </ul>
</div>

但是如何制作第二个导航？

我尝试复制此代码并将data-target =“.nav-collapse”更改为data-target =“.nav-collapse2”,但这不起作用.

Twitter Bootstrap是否能够在页面上拥有2个或更多响应式导航？

解决方法

你走在正确的轨道上.

.nav-collapse在bootstrap内部使用,实际上使导航响应性地崩溃.不使用.nav-collapse2作为数据目标,而是使用您自己的类/ id(除了使用.nav-collapse)

这是一个例子：

<a class="btn btn-navbar" data-toggle="collapse" data-target=".col1">groups</a>
<a class="btn btn-navbar" data-toggle="collapse" data-target=".col2">groups2</a>

<div class="nav-collapse col1">
    <ul class="nav">
        <li><a href="#">Nav Link</a></li>
        <li><a href="#">Nav Link</a></li>
    </ul>
</div>
<div class="nav-collapse col2">
    <ul class="nav">
        <li><a href="#">Nav Link2</a></li>
        <li><a href="#">Nav Link2</a></li>
   </ul>
</div>

这是一个fiddle.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!