logo标签列表

将Bootstrap折叠侧边栏菜单转换为下拉菜单

javascriptjqueryhtmlcsstwitter-bootstrap
4
我有一个使用 "nav nav-pills nav-stacked" 创建的纵向菜单的左侧边栏，当屏幕大小为 XS（移动端）时，我希望该菜单变成适合的下拉菜单，并开始关闭 / 折叠。
以下是我的起始代码： http://www.bootply.com/zOy2IJumZO 此处也提供了 HTML 代码。
<div class="container-fluid">
  <div class="row">

    <div class="col-xs-12 col-sm-3">

        <div class="panel panel-info">
            <div class="panel-heading">Categories <span class="badge pull-right">12345</span></div>
            <ul id="categories-menu" class="nav nav-pills nav-stacked">
                <li id="cid-1"><a href="automotive-vehicles">Automotive Vehicles</a></li>
                <li id="cid-8"><a href="business-to-business">Business-to-Business</a></li>
                <li id="cid-10"><a href="community">Community</a></li>
                <li id="cid-2"><a href="electronics">Electronics</a></li>
                <li id="cid-11"><a href="events">Events</a></li>
                <li id="cid-12"><a href="fashion">Fashion</a></li>
                <li id="cid-13"><a href="freebies">Freebies</a></li>
            </ul>            
        </div>

        <div class="panel panel-primary">
            <div class="panel-heading">Site statistics</div>
            <ul class="list-unstyled">
                <li>1000 Users</li>
                <li>200 Online</li>
                <li>300 Hidden</li>
            </ul>
        </div>

    </div>

    <div class="col-xs-12 col-sm-9">
      This is the right content column<br>
      This is the right content column<br>
      This is the right content column<br>
      This is the right content column<br>
      This is the right content column<br>
      This is the right content column<br>
      This is the right content column<br>
    </div>

  </div>
</div>
1个回答
2
用Bootstrap Collapse类包装ul标签：
<div class="collapse navbar-collapse" id="collapse">  
    <ul id="categories-menu" class="nav nav-pills nav-stacked">
        <li id="cid-1"><a href="automotive-vehicles">Automotive Vehicles</a></li>
        <li id="cid-8"><a href="business-to-business">Business-to-Business</a></li>
        <li id="cid-10"><a href="community">Community</a></li>
        <li id="cid-2"><a href="electronics">Electronics</a></li>
        <li id="cid-11"><a href="events">Events</a></li>
        <li id="cid-12"><a href="fashion">Fashion</a></li>
        <li id="cid-13"><a href="freebies">Freebies</a></li>
    </ul> 
</div>

接下来，将 data-toggle 和 data-target 添加到您想要切换菜单的元素中。例如，在您的代码中的 badge 12345 中：

<span data-toggle="collapse" data-target="#collapse" class="badge pull-right">
1
工作示例 http://www.bootply.com/67ITfcZKHe （点击“12345”切换菜单） - kostans3k
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接