防止bootstrap导航栏下拉列表隐藏在“移动导航栏菜单中”

Question

我使用bootstrap，我在标题中显示语言选择。 现在，当我减小宽度时，bootstrap将把我的元素放在移动选择中。 （截图）

大部分时间都是好事，但在某些情况下我希望选项保持可见。 移动菜单左侧的Fest选项。

<div class="navbar-header">
....
</div>
<div class="collapse navbar-collapse" id="navbar-main">
    <ul class="nav navbar-nav navbar-right">
         <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
               Deutsch<span class="caret"></span>
            </a>
            <ul class="dropdown-menu" role="menu">
                    <li><a href="foo">French</a></li>
                    <li><a href="foo">English</a></li>
            </ul>
        </li>
    </ul>
</div>

如果我做两组像

  <ul class="nav navbar-nav navbar-right">
    .. Non collapsable items
  </ul>
 <div class="collapse navbar-collapse" id="navbar-main">
   .. collapsable items
</div>

那么不可折叠的项目放在菜单下面而不是它的左侧。

Answer 1

干得好。 听起来你想要从boostrap移动视图中排除一些菜单项。 我有类似的问题，并在这里回答。

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

Answer 2

已转贴*

下面的示例演示了如何使用您想要的任何类型的“vanilla bootstrap”NAVBAR配置。 它包括一个站点标题，左右对齐的折叠和非折叠菜单项以及静态文本。 请务必阅读评论，以便更全面地了解您可以改变的内容。 请享用！

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

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

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

Answer 3

要从Bootstrap的自动折叠功能中删除菜单部分，您需要将其移出。 类似于以下内容：

<div class="navbar-header">
    <a class="navbar-brand" href="#">Project name</a>
    <ul class="nav navbar-nav"> <!-- Items in here won't collapse -->
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
               Deutsch<span class="caret"></span>
            </a>
            <ul class="dropdown-menu" role="menu">
                <li><a href="foo">French</a></li>
                <li><a href="foo">English</a></li>
            </ul>
        </li>
    </ul>
    </div>
    <div class="collapse navbar-collapse" id="navbar-main"> <!-- Anything in here will collapse -->
        <ul class="nav navbar-nav navbar-right">
            <a href="#">Link</a>
            <a href="#">Another Link</a>
        </ul>
    </div>
</div>

“崩溃”div中的任何内容都会崩溃到移动菜单中。 任何不存在的东西，如大多数菜单中的导航栏品牌链接，都不会。

希望有所帮助。