Question

我已经阅读了一些关于如何使用药片作为菜单的其他讨论，我也可以在菜单折叠时（当只显示切换按钮时）使它们正常运行。

当一个药丸有一个子菜单时出现问题，在这种情况下，当菜单折叠时，当我点击切换按钮时，药片看起来堆叠而不是另一个，但是当我点击药丸时子菜单（本例中为Link 1），子菜单显示为下面元素的正常下拉列表。

我希望与导航栏具有相同的行为，当您单击具有子菜单的菜单项时，sumbenu会向下滑动下一个菜单项，它不会显示在它们上面。

现在有些代码：

＆＃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.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script>
        $(document).ready(function() {
            $('#nav-menu').on('show.bs.collapse', function () {
                $('.nav-pills').addClass('nav-stacked');
            });
    
            $('#nav-menu').on('hide.bs.collapse', function () {
                $('.nav-pills').removeClass('nav-stacked');
            });
        });
    </script>
    <nav class="navbar navbar-default" role="navigation">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-menu">
                <span class="sr-only">Toggle menu</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
    
        <div class="collapse navbar-collapse" id="nav-menu">
            <ul class="nav nav-pills">
                <li><a href="#" class="dropdown-toggle" data-toggle="dropdown">Link 1 <b class="caret"></b></a>
                    <ul class="dropdown-menu multi-level">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                    </ul>
                </li>
                <li><a href="#">Link 2</a></li>
                <li><a href="#">Link 3</a></li>
            </ul>
        </div>
    </nav>

＆＃13;

是否可以让子菜单按照我的意愿行事？

Answer 1

需要修理两件事：

.navbar-collapse.in
.nav > li在一行中创建导航链接

＆＃13;

.nav > li {
 display: inline-block !important;
}

.navbar-collapse.in {
 overflow: inherit !important;
}

＆＃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.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script>
        $(document).ready(function() {
            $('#nav-menu').on('show.bs.collapse', function () {
                $('.nav-pills').addClass('nav-stacked');
            });
    
            $('#nav-menu').on('hide.bs.collapse', function () {
                $('.nav-pills').removeClass('nav-stacked');
            });
        });
    </script>
    <nav class="navbar navbar-default" role="navigation">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-menu">
                <span class="sr-only">Toggle menu</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
    
        <div class="collapse navbar-collapse" id="nav-menu">
            <ul class="nav nav-pills">
                <li><a href="#" class="dropdown-toggle" data-toggle="dropdown">Link 1 <b class="caret"></b></a>
                    <ul class="dropdown-menu multi-level">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                    </ul>
                </li>
                <li><a href="#">Link 2</a></li>
                <li><a href="#">Link 3</a></li>
            </ul>
        </div>
    </nav>

＆＃13;

Answer 2

如果我清楚地了解您，您需要做的只是将课程navbar-nav添加到主ul中：

<ul class="nav navbar-nav nav-pills">

jsfiddle-example

NAV-丸＆＃39;菜单折叠时的子菜单行为

2 个答案: