从 bootstrap 3 导航栏的折叠中排除菜单项答案

【问题标题】：Exclude menu item from the collapse of bootstrap 3 navbar从 bootstrap 3 导航栏的折叠中排除菜单项
【发布时间】：2014-01-29 01:02:36
【问题描述】：

这就是我所拥有的，我尝试在“品牌”内部移动我的部分并进行向右拉动，在品牌外部和折叠外部进行向左/向右拉动，同时还尝试放置它在折叠部分之前或之后。

将它添加到品牌部分时它可以工作，但它会下降到新的一行。如何保持在同一行？

    <body>
        <header>
            <nav class="navbar navbar-default navbar-inverse" role="navigation" style="font-size: 18px">
                <div class="container">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                            <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="navbar-brand site-title" style="text-decoration: none; font-size: 24px; font-weight:bold">@Html.ActionLink("Manager", "Index", "Player")</div>
                    </div>

                    <div class="collapse navbar-collapse navbar-ex1-collapse navbar-right">
                        <ul class="nav navbar-nav">
@*                          <li class="active">@Html.ActionLink("Home", "Index", "Player")</li>
                            <li class="active">@Html.ActionLink("Match", "Index", "Match")</li>                             <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Profile <b class="caret"></b></a>
                                <ul class="dropdown-menu">
                                    <li>@Html.ActionLink("Change Password", "ManagePassword", "Account")</li>
                                    <li>@Html.ActionLink("Update Profile Info", "UpdateProfile", "Account")</li>
                                    <li>@Html.ActionLink("Log Off", "LogOff", "Account")</li>
                                </ul>
                            </li>
                        </ul>
                    </div>

                    <div>
                        <!-- I don't want it apart of the collapsible portion -->
                        <div class="navbar-right">
                            <ul class="nav navbar-nav">
                                <li class="active">@Html.ActionLink("Match", "Index", "Match")</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </nav>
        </header>

【问题讨论】：

请提供一些关于您的目标的详细信息，您想要实现的目标尚不清楚（显示所需布局的简单图片会很有用）
@zessx 抱歉，刚看到这个。我的导航栏中有大约 8 个菜单项。我希望无需单击导航栏上的下拉按钮即可访问一个主菜单项，因为它是一个将在移动设备上大量使用的链接。因此，我不希望用户必须通过任何额外的“点击/触摸”来访问该菜单项。下面的答案对我有用，我只需要做一些更多的格式化，这样它就不会与下拉菜单按钮重叠。

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

下面是一个示例，展示了如何拥有您可能想要的任何类型的“普通引导”导航栏配置。它包括一个站点标题、左对齐或右对齐的折叠和非折叠菜单项，以及静态文本。请务必阅读 cmets 以更全面地了解您可以更改的内容。享受！

小提琴：http://jsfiddle.net/nomis/n9KtL/1/

像往常一样在左侧使用 clearfix 和扩展选项：http://jsfiddle.net/jgoemat/u1j8o0n3/1/

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav role="navigation" class="navbar navbar-default navbar-fixed-top">
  <div class="container">

    <!-- Title -->
    <div class="navbar-header pull-left">
      <a href="/" class="navbar-brand">GNOMIS</a>
    </div>

    <!-- 'Sticky' (non-collapsing) right-side menu item(s) -->
    <div class="navbar-header pull-right">
      <ul class="nav pull-left">
        <!-- This works well for static text, like a username -->
        <li class="navbar-text pull-left">User Name</li>
        <!-- Add any additional bootstrap header items.  This is a drop-down from an icon -->
        <li class="dropdown pull-right">
          <a href="#" data-toggle="dropdown" style="color:#777; margin-top: 5px;" class="dropdown-toggle"><span class="glyphicon glyphicon-user"></span><b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li>
              <a href="/users/id" title="Profile">Profile</a>
            </li>
            <li>
              <a href="/logout" title="Logout">Logout </a>
            </li>
          </ul>
        </li>
      </ul>

      <!-- Required bootstrap placeholder for the collapsed menu -->
      <button type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
      </button>
    </div>

    <!-- The Collapsing items            navbar-left or navbar-right -->
    <div class="collapse navbar-collapse navbar-left">
      <!--                      pull-right keeps the drop-down in line -->
      <ul class="nav navbar-nav pull-right">
        <li><a href="/news">News</a>
        </li>
        <li><a href="/Shop">Shop</a>
        </li>
      </ul>
    </div>

    <!-- Additional navbar items -->
    <div class="collapse navbar-collapse navbar-right">
      <!--                      pull-right keeps the drop-down in line -->
      <ul class="nav navbar-nav pull-right">
        <li><a href="/locator">Locator</a>
        </li>
        <li><a href="/extras">Extras</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

【讨论】：

很好的答案和非常有用的 cmets。我有一个与此相关的后续问题：您必须有一个折叠部分吗？如果我只想要通过“hidden-”和“visible-”类控制其可见性的静态项目怎么办？
@Andrew 谢谢！我对引导菜单进行了深入研究，并认为我会分享。不，您不需要任何可折叠的项目。任何带有navbar-header 类的元素都不会崩溃！
@nomis，这行得通，但你能解释一下为什么你需要下拉标题中的“margin-top：5px”吗？
现在已损坏。这是基于上述bootply.com/V46gEMiBa3 的工作示例
@MichaelPlotke 评论有效，但现在也有效。原始小提琴的一个问题是折叠菜单出现在屏幕中间而不是下方，在@MichaelPlotke 中修复了一个带有clearfix visible-xs-block 类的div。

【解决方案2】：

您应该能够在 2 个nav-header 中使用pull-left 和pull-right 来防止链接崩溃。

见：http://bootply.com/104747

  <nav class="navbar navbar-default navbar-inverse" role="navigation">
    <div class="container">
      <div class="navbar-header pull-left">
        <div class="navbar-brand">Brand</div>
      </div>

      <!-- I don't want it apart of the collapsible portion -->
      <div class="navbar-header pull-right">
        <ul class="nav navbar-nav pull-left">
          <li class="active"><a href="">No Collapse</a> </li>
        </ul>
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <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 navbar-right">
        <ul class="nav navbar-nav">
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Profile <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li>Change Password</li>
              <li>Update Profile Info</li>
              <li>Log Off</li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </nav>

【讨论】：

看起来不错。折叠后看起来有一点重叠。您知道如何解决这个问题（例如仅在折叠后才添加边距吗？）。我想我已经尝试了双头，拉左和拉右，但可能没有在一起。很好的答案！！！今晚下班回家后，我将尝试将其合并。
@Skelly，很好的答案，只是希望阅读格式不佳的 html 更容易！
@nomis 哪个部分格式不正确？我对我的代码样式非常有强迫症，并且觉得这是阅读它的最简单方法......
如果
中有超过 1 个
则此方法无效

这似乎不再起作用了。当您展开折叠的菜单项时，它会在品牌顶部的左侧显示这些项目。