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中。我并不特别喜欢这种方法，因为它复制了内容 - 尽管从很多方面来看，它并不是很多内容，但这并不是特别好。

关于如何实现这一目标的任何想法？

Answer 1

您可以为响应式移动视图添加重复的下拉菜单并隐藏其他视图，我只是更新您的小提琴.. 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;
  }
}

Answer 2

我认为你只能使用bootstrap样式来实现这一点。

您可以定义自己的指针样式，并将dropdown-menu移出#siteNav。像这样：

<div class="navbar-default">
    <div class="container">
        <div class="nav-special-contailner">
            <div class="btn-group nav-special">
                <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 class="navbar-header">
            ...
        </div>
        <div id="siteNav" class="navbar-collapse collapse">
            ...
        </div>
    </div>
</div>

和

.nav-special {
    position: absolute;
    right: 133px;
    top: 8px;
}

@media (min-width: 768px) {
    .nav-special-contailner {
        position: relative;
    }
    .nav-special {
        right: 0;
        margin-right: 250px;
    }
}

Here是一个jsfiddle。

Answer 3

你可以制作2 x .navbar-header。一个用于.navbar-brand，另一个用于.navbar-toggle按钮，另一个用于语言.dropdown和右.navbar-toggle按钮。

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

        <div class="navbar-header pull-left">
            <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>

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

        <div class="navbar-header pull-right right-side-menu">
            <form class="navbar-form pull-left">
                <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>
            </form>
            <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>
        </div>

        <div class="collapse navbar-collapse pull-right" id="siteNav">
            <form class="navbar-form navbar-right">
                <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>

#siteNav块必须在第二个.navbar-header之后，为了在xs屏幕中的主导航栏下方显示折叠，所以我添加了一个自定义类来重新排序sm和更大屏幕中的div。 / p>

@media screen and (min-width: 768px) {
     .navbar-header.right-side-menu {
          margin-left: -350px;
          margin-right: 225px;
     }
}

.navbar-header.right-side-menu .navbar-form {
     border-color: transparent !important;
     margin-right: 15px;
     padding: 0;
}

jsfiddle中的完整代码。

Answer 4

您可以为自适应移动视图添加重复下拉菜单，并隐藏其他下拉菜单

HTML，

<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>

            <div class="btn-group dropdown-btn pull-right hidden-sm hidden-md hidden-lg">
              <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>

            <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 hidden-xs">
                    <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; 
}

.dropdown-btn {
  margin-top: 8px;
  margin-right: 15px;
}

请参阅示例：https://jsfiddle.net/7Ltspomz/12/

无论如何，如果你不喜欢复制下拉列表，你可以简单地对标记做一些修改并添加一些棘手的样式，

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>
            <div class="navbar-right">
                <div class="btn-group dropdown-btn pull-left">
                    <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 id="siteNav" class="navbar-collapse navbar-form collapse search-input pull-left">
                    <form>
                        <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>

    <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>

CSS，

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

.dropdown-btn {
  margin-top: 10px;
  margin-right: 15px;
}

.search-input {
  margin-top: 0px;
  margin-bottom: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
}

.search-input > form {
  margin: 10px 0;
}

@media screen and (max-width: 768px) {
  .dropdown-btn {
    position: absolute;
    top: -2px;
    right: 117px;
  }
}

请参阅示例：https://jsfiddle.net/7Ltspomz/20/

Answer 5

这是如何解决这个问题的。 从表单向上移动按钮并为bootstrap类添加了一些样式，详细信息：

<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>

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

        </div>
        <div class="additional-nav clearfix">
            <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>

            <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 class="site-nav">
            <form id="siteNav" class="navbar-collapse collapse">
                <div class="navbar-form navbar-right">
                    <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>
                </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; 
}

.additional-nav {
    display: inline-block;
    float: right;
}

.navbar-header {
    display: inline-block;
}

.additional-nav .btn-group, .additional-nav .btn-group-vertical {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    float: right;
    padding: 9px 10px;
}

.site-nav {
    float: right;
}

https://jsfiddle.net/7Ltspomz/23/