jquery - 两行导航栏汉堡菜单缩小第一行

Question

我正在使用 bootstrap 创建导航菜单。我希望基本导航在第二行，我想要一些杂项。快速链接挂出作为顶行。

在研究了几个示例并将它们组合在一起之后，我得到了一个似乎有效的解决方案(见下文)，但有一个异常(exception)......

当我折叠菜单时，顶部栏很好地包裹了链接......根据需要，但是一旦我获得小型设备的汉堡菜单，我的第二个导航栏就会向上推并隐藏顶部导航栏元素。 Grr...我就是无法阻止这种行为。

我应该看哪里？

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

        <div id="topBar">

            <div class="container">

                <div class="row">

                    <div class="col-md-3 col-xs-12" >
                        <ul class="top-links list-inline">
                            <li class="hidden-xs"><a href="@Url.Action("Index", "Contact")"><i class="fa fa-envelope"></i> CONTACT</a></li>
                            <li class="hidden-xs"><a target="_blank" href="https://get.teamviewer.com/xxxxx"><i class="fa fa-medkit"></i>Quick Support</a></li>
                        </ul>
                    </div>

                    <div class="col-md-9 col-xs-12">
                        @Html.Partial("_LoginPartial")
                    </div>



                </div>

            </div>
        </div>


        <div class="container">

                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    @Html.ActionLink("xxxxxxx.Net", "Index", new { controller = "Home" }, new { @class = "navbar-brand" })
                </div>

                <div class="collapse navbar-collapse navbar-ex1-collapse">
                    <ul class="nav navbar-nav navbar-right">
                       ... menu stuff here removed for simplicity 
                    </ul>

                </div>

                <div class="navbar-header navbar-lower" role="navigation">
            <div class="container">
                <div class="collapse navbar-collapse collapse-buttons">
                    <ul class="nav navbar-nav navbar-right">
                        <li id="home">
                            @Html.ActionLink("Home2", "Index2", "Home")
                        </li>
                        <li id="about">
                            @Html.ActionLink("About", "Index", "About")
                        </li>
                        <li id="services">
                            @Html.ActionLink("Services", "Index", "Services")
                        </li>
                        <li id="contact">
                            @Html.ActionLink("Contact", "Index", "Contact")
                        </li>
                        <li id="portfolio" class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Portfolio <b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li id="1columnportfolio">
                                    @Html.ActionLink("1 Column Portfolio", "OneColumn", "Portfolio")
                                </li>
                                <li id="2columnportfolio">
                                    @Html.ActionLink("2 Column Portfolio", "TwoColumn", "Portfolio")
                                </li>
                                <li id="3columnportfolio">
                                    @Html.ActionLink("3 Column Portfolio", "ThreeColumn", "Portfolio")
                                </li>
                                <li id="4columnportfolio">
                                    @Html.ActionLink("4 Column Portfolio", "FourColumn", "Portfolio")
                                </li>
                                <li id="singleportfolioitem">
                                    @Html.ActionLink("Single Portfolio Item", "SingleItem", "Portfolio")
                                </li>
                            </ul>
                        </li>
                        <li id="blog" class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Blog <b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li id="bloghome1">
                                    @Html.ActionLink("Blog Home 1", "Home1", "Blog")
                                </li>
                                <li id="bloghome2">
                                    @Html.ActionLink("Blog Home 2", "Home2", "Blog")
                                </li>
                                <li id="blogpost">
                                    @Html.ActionLink("Blog Post", "Post", "Blog")
                                </li>
                            </ul>
                        </li>
                        <li id="other" class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Other Pages <b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li id="fullwidthpage">
                                    @Html.ActionLink("Full Width Page", "FullWidth", "Other")
                                </li>
                                <li id="sidebarpage">
                                    @Html.ActionLink("Sidebar Page", "Sidebar", "Other")
                                </li>
                                <li id="faq">
                                    @Html.ActionLink("FAQ", "Faq", "Other")
                                </li>
                                <li id="404">
                                    @Html.ActionLink("404", "FourOhFour", "Other")
                                </li>

                            </ul>
                        </li>


                    </ul>
                </div>

            </div>
        </div>
            </div>


    </nav>

Answer 1

如果没有别的，也许这会给你一些想法。您可以将这些链接放在 navbar-header 上方，以便与 navbar 的其余部分固定在一起，并且不会妨碍 collapse 功能.它确实需要一些小的 CSS，但可能是更简单的选择。希望对您有所帮助。

查看示例代码段和全页并减少您的浏览器。

body {
  padding-top: 100px;
}
.nav.navbar-top > li {
  display: inline-block;
  margin: 0;
  padding: 0;
}
.nav.navbar-top > li > a:hover,
.nav.navbar-top > li > a:focus {
  background: none;
}
@media (max-width: 480px) {
  .nav.navbar-top span {
    display: none;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.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" />
<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="nav navbar-top">
      <li class="navbar-text"> <a href="#" class="navbar-link"><i class="fa fa-envelope"></i> <span>CONTACT</span></a>
      </li>
      <li class="navbar-text"> <a href="#" class="navbar-link"><i class="fa fa-medkit"></i> <span>QUICK SUPPORT</span></a>
      </li>
      <li class="navbar-text pull-right"> <a href="#" class="navbar-link"><i class="fa fa-sign-in"></i> <span>LOGIN</span></a>
      </li>
    </div>
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <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="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a>
        </li>
        <li><a href="#">Link</a>
        </li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a>
            </li>
            <li><a href="#">Another action</a>
            </li>
            <li><a href="#">Something else here</a>
            </li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a>
            </li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a>
            </li>
          </ul>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a>
        </li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a>
            </li>
            <li><a href="#">Another action</a>
            </li>
            <li><a href="#">Something else here</a>
            </li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container-fluid -->
</nav>
<div class="container-fluid">
  <p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
    survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
    software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a
    galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets
    containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
    standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the
    printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,
    but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker
    including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled
    it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
    and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since
    the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in
    the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting
    industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic
    typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem
    Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
    publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer
    took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
    sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
    standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the
    printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,
    but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker
    including versions of Lorem Ipsum.
  </p>
</div>