html - Bootstrap 多级导航栏 - 如何防止内容折叠

Question

首先，我想这是一个很好的例子，说明如何使用 Bootstrap 实现多级导航栏(这是我苦苦挣扎了很长时间的事情)

其次，我有一个关于防止内容在导航栏上折叠的问题。

我的导航栏有三行，两个 navbar-default 和一个 navbar-inverse，以及折叠时控制每个部分的三个按钮:

代码:

<nav class="navbar navbar-fixed-top">

    <div class="navbar-default">
        <div class="container">
            <div class="navbar-header">

                <button type="button"
                        class="navbar-toggle collapsed pull-left"
                        data-toggle="collapse"
                        data-target="#megaNav"
                        aria-expanded="false"
                        aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>

                <button type="button"
                        class="navbar-toggle collapsed"
                        data-toggle="collapse"
                        data-target="#siteNav"
                        aria-expanded="false"
                        aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>

                <button type="button"
                        class="navbar-toggle collapsed"
                        data-toggle="collapse"
                        data-target="#authNav"
                        aria-expanded="false"
                        aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>

                <a class="navbar-brand" href="#">NewCo</a>

            </div>
            <div id="siteNav" class="navbar-collapse collapse">
                <form class="navbar-form navbar-right">
                    <div class="btn-group">
                        <button type="button"
                                class="btn btn-default dropdown-toggle"
                                data-toggle="dropdown"
                                aria-haspopup="true"
                                aria-expanded="false">
                            English <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu">
                            <li><a href="#">English</a></li>
                            <li><a href="#">French</a></li>
                            <li><a href="#">Spanish</a></li>
                            <li><a href="#">Italian</a></li>
                            <li><a href="#">German</a></li>
                        </ul>
                    </div>
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="Search for...">
                        <span class="input-group-btn">
                            <button class="btn btn-default" type="button">
                                <span class="glyphicon glyphicon-search"></span>
                            </button>
                        </span>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="navbar-default">
        <div class="container">
            <div id="authNav" class="collapse navbar-collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">Log in</a></li>
                    <li><a href="#">Register</a></li>
                    <li><a href="#">Privacy Policy</a></li>
                </ul>
            </div>
        </div>
    </div>

    <div class="navbar-inverse">
        <div class="container">
            <div id="megaNav" class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">About Us</a></li>
                    <li><a href="#">Products</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">Corporate</a></li>
                    <li><a href="#">Contact Us</a></li>
                </ul>
            </div>
        </div>
    </div>

</nav>

https://jsfiddle.net/7Ltspomz/

---

未折叠时(这就是我想要的样子)

当它折叠时(这是它目前所做的)

我不想要这个(这是它目前所做的)

我想要这个...(折叠时)

...和这个(展开时)

---

我设法实现这一点的唯一方法是有两个下拉按钮；一种显示 sm、md 和 lg，一种只显示 xs。我不是特别喜欢这种方法，因为它会重复内容 - 尽管内容不多，但从许多 Angular 来看，这并不是特别好。

关于如何实现这一点有什么想法吗？

Answer 1

您可以为响应式移动 View 添加一个重复的下拉列表并隐藏另一个 View ，我只是更新了您的 fiddle .. check here

HTML

<nav class="navbar navbar-fixed-top">

<div class="navbar-default">
    <div class="container">
        <div class="navbar-header">

            <button type="button"
                    class="navbar-toggle collapsed pull-left"
                    data-toggle="collapse"
                    data-target="#megaNav"
                    aria-expanded="false"
                    aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

            <button type="button"
                    class="navbar-toggle collapsed"
                    data-toggle="collapse"
                    data-target="#siteNav"
                    aria-expanded="false"
                    aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

            <button type="button"
                    class="navbar-toggle collapsed"
                    data-toggle="collapse"
                    data-target="#authNav"
                    aria-expanded="false"
                    aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

            <a class="navbar-brand" href="#">NewCo</a>

            <div class="pull-right mobile">
            <div class="btn-group">
                    <button type="button"
                            class="btn btn-default dropdown-toggle"
                            data-toggle="dropdown"
                            aria-haspopup="true"
                            aria-expanded="false">
                        English <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu">
                        <li><a href="#">English</a></li>
                        <li><a href="#">French</a></li>
                        <li><a href="#">Spanish</a></li>
                        <li><a href="#">Italian</a></li>
                        <li><a href="#">German</a></li>
                    </ul>
                </div>
            </div>

        </div>
        <div id="siteNav" class="navbar-collapse collapse">
            <form class="navbar-form navbar-right">
                <div class="btn-group desktop">
                    <button type="button"
                            class="btn btn-default dropdown-toggle"
                            data-toggle="dropdown"
                            aria-haspopup="true"
                            aria-expanded="false">
                        English <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu">
                        <li><a href="#">English</a></li>
                        <li><a href="#">French</a></li>
                        <li><a href="#">Spanish</a></li>
                        <li><a href="#">Italian</a></li>
                        <li><a href="#">German</a></li>
                    </ul>
                </div>
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="Search for...">
                    <span class="input-group-btn">
                        <button class="btn btn-default" type="button">
                            <span class="glyphicon glyphicon-search"></span>
                        </button>
                    </span>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="navbar-default">
    <div class="container">
        <div id="authNav" class="collapse navbar-collapse">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Log in</a></li>
                <li><a href="#">Register</a></li>
                <li><a href="#">Privacy Policy</a></li>
            </ul>
        </div>
    </div>
</div>

<div class="navbar-inverse">
    <div class="container">
        <div id="megaNav" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">About Us</a></li>
                <li><a href="#">Products</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Corporate</a></li>
                <li><a href="#">Contact Us</a></li>
            </ul>
        </div>
    </div>
</div>

CSS

.navbar .navbar-header .navbar-toggle.pull-left {
  margin-right: 0;
  margin-left: 15px; 
}

.mobile{display:none;}

@media (max-width: 767px){
  .desktop{display:none}

  .mobile{
    display:block;
    margin-top:8px;
    margin-right:15px;
  }
}