twitter-bootstrap 如何在折叠的引导程序导航栏菜单的标题中放置下拉列表

How can I put a dropdown list in the header of a collapsed bootstrap navbar menu

提问by hobwell

tl;dr

tl;博士

How can I get a proper dropdown to appear next to the standard list button in a collapsed bootstrap navbar menu?

如何在折叠的引导程序导航栏菜单中的标准列表按钮旁边显示正确的下拉菜单？

Details

细节

With MVC 5 and Bootstrap 3 (3.3.2) I am wondering how I can put a drop down menu in the collapsed version of a navbar. The default behaviour is somewhat problematic.

使用 MVC 5 和 Bootstrap 3 (3.3.2)，我想知道如何在导航栏的折叠版本中放置下拉菜单。默认行为有些问题。

I am trying to place a language selector in the top right of the page regardless of whether the menu is collapsed for mobile or not.

我试图在页面的右上角放置一个语言选择器，无论菜单是否为移动设备折叠。

This is how it looks (and should continue to look) in the non-collapsed navbar:

这是它在未折叠的导航栏中的外观（并且应该继续看起来）：

<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            @Html.ActionLink("Application name", "Index", "Home", New With {.area = ""}, New With {.class = "navbar-brand"})
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#MainMenu">
                <span class="glyphicon glyphicon-th-list"></span>
            </button>
        </div>
        <div class="navbar-collapse collapse" id="MainMenu">
            <ul class="nav navbar-nav">
                <li>@Html.ActionLink("Home", "Index", "Home")</li>
                <li>@Html.ActionLink("About", "About", "Home")</li>
                <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                <li>@Html.ActionLink("Survey", "Instructions", "Survey")</li>
                <li><a href="/LT/LocalizationAdmin/LocalizationAdmin.aspx">Localization</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li>@Html.ActionLink("Register", "Register", "Account", routeValues:=Nothing, htmlAttributes:=New With {.id = "registerLink"})</li>
                <li>@Html.ActionLink("Log in", "Login", "Account", routeValues:=Nothing, htmlAttributes:=New With {.id = "loginLink"})</li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">EN<b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="/LT/DE">DE</a></li>
                        <li><a href="/LT/EN">EN</a></li>
                        <li><a href="/LT/ES">ES</a></li>
                        <li><a href="/LT/FR">FR</a></li>
                        <li><a href="/LT/RO">RO</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</div>

I run into problems on mobile devices with this pattern. Below is what a user sees AFTER clicking on the language drop down (after hitting the list button). Notice the nav-bar on the right? Well, that bar doesn't show on mobile devices and so the user is left thinking that the drop-down doesn't do anything, not realizing that they have to scroll the list to get to the language choices.

我在使用这种模式的移动设备上遇到了问题。以下是用户在单击语言下拉菜单后（点击列表按钮后）看到的内容。注意到右侧的导航栏了吗？好吧，该栏不会显示在移动设备上，因此用户会认为下拉菜单没有任何作用，而没有意识到他们必须滚动列表才能找到语言选项。

What I am looking to do is have a drop down (as in the first image) next to the list button, as in the image below but for the life of me I can't figure out how to do it.

我想要做的是在列表按钮旁边有一个下拉菜单（如第一张图片所示），如下图所示，但对于我的生活，我不知道该怎么做。

This is a close as I have been able to get, but a side effect of this is that the language selector aligns to the left when the menu is not collapsed. I don't really want the accordion, I'd much prefer the drop-down. Failing that, it would be nice if the language selector opened a list the same way as the list button does (ie.full width), rather than having it jammed up against the side.

这是我能够得到的关闭，但这样做的副作用是，当菜单未折叠时，语言选择器会向左对齐。我真的不想要手风琴，我更喜欢下拉菜单。否则，如果语言选择器以与列表按钮相同的方式（即全宽）打开列表，而不是将其卡在侧面，那就太好了。

The code for the last image is as follows:

最后一张图片的代码如下：

<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            @Html.ActionLink("Application name", "Index", "Home", New With {.area = ""}, New With {.class = "navbar-brand"})
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#MainMenu">
                <span class="glyphicon glyphicon-th-list"></span>
            </button>
            <ul class="nav navbar-nav pull-right" style="width: 65px;">
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" style="margin-right: 5px;">EN<b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="/LT/DE">DE</a></li>
                        <li><a href="/LT/EN">EN</a></li>
                        <li><a href="/LT/ES">ES</a></li>
                        <li><a href="/LT/FR">FR</a></li>
                        <li><a href="/LT/RO">RO</a></li>
                    </ul>
                </li>
            </ul>
        </div>
        <div class="navbar-collapse collapse" id="MainMenu">
            <ul class="nav navbar-nav">
                <li>@Html.ActionLink("Home", "Index", "Home")</li>
                <li>@Html.ActionLink("About", "About", "Home")</li>
                <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                <li>@Html.ActionLink("Survey", "Instructions", "Survey")</li>
                <li><a href="/LT/LocalizationAdmin/LocalizationAdmin.aspx">Localization</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li>@Html.ActionLink("Register", "Register", "Account", routeValues:=Nothing, htmlAttributes:=New With {.id = "registerLink"})</li>
                <li>@Html.ActionLink("Log in", "Login", "Account", routeValues:=Nothing, htmlAttributes:=New With {.id = "loginLink"})</li>
            </ul>
        </div>
    </div>
</div>

Does anyone have any idea how to accomplish this? Apologies for the length, but I wanted to be clear.

有谁知道如何做到这一点？为篇幅道歉，但我想说清楚。

回答by hobwell

So I found a way to accomplish this, but it isn't very pretty. I wouldn't recommend doing this unless you know your dropdown is going to be short enough to always fit on a mobile screen. (http://www.bootply.com/mzfCeWgt2u)

所以我找到了一种方法来实现这一点，但它不是很漂亮。我不建议这样做，除非您知道您的下拉菜单足够短以始终适合移动屏幕。( http://www.bootply.com/mzfCeWgt2u)

The basic idea is to separate the header into a left and right side and put the drop-down directly in the right-hand header so that the collapse styles don't apply to it. It requires a bit of css to make everything appear inline correctly. Your mileage may vary.

基本思想是将标题分成左右两侧，并将下拉菜单直接放在右侧标题中，这样折叠样式就不会应用于它。它需要一些 css 才能使所有内容正确显示为内联。你的旅费可能会改变。

First, the menu:

一、菜单：

<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
      <div class="navbar-header pull-left">
          <a class="navbar-brand" href="/LT/">Application name</a>
      </div>
      <div class="navbar-header pull-right">
          <a class="btn navbar-btn pull-right" style="margin-right: 5px;" href="#" data-toggle="dropdown">EN<b class="caret"></b></a>
          <ul class="dropdown-menu realign">
              <li><a href="/LT/DE">DE</a></li>
              <li><a href="/LT/EN">EN</a></li>
              <li><a href="/LT/ES">ES</a></li>
              <li><a href="/LT/FR">FR</a></li>
              <li><a href="/LT/RO">RO</a></li>
          </ul>
          <button class="navbar-toggle" type="button" data-target="#MainMenu" data-toggle="collapse">
              <span class="glyphicon glyphicon-th-list"></span>
          </button>
      </div>
      <div class="navbar-collapse collapse clear-collapse" id="MainMenu">
          <ul class="nav navbar-nav">
              <li><a href="/LT/">Home</a></li>
              <li><a href="/LT/Home/About">About</a></li>
              <li><a href="/LT/Home/Contact">Contact</a></li>
              <li><a href="/LT/Survey/Instructions">Survey</a></li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
              <li><a id="registerLink" href="/LT/Account/Register">Register</a></li>
              <li><a id="loginLink" href="/LT/Account/Login">Log in</a></li>
          </ul>
      </div>
  </div>
</div>

And then the css:

然后是css：

/**
 * clear floated menu items when collapsed
 */
@media screen and (max-width: 767px) {
    .clear-collapse{
        clear: both;
    }
}

/**
 * realign the drop down when not collapsed
 */
@media screen and (min-width: 768px){
    .pull-right > .dropdown-menu.realign {
        left: auto;
        right: auto;
    }
}

/**
 * set the color of nav-bar anchors styled as btns
 */
.navbar-header .btn{
    color: #9D9D9D;
}
.navbar-header .btn:hover {
    color: #FFF;
}

I will also post another answer which handles the issue a bit more elegantly.

我还将发布另一个更优雅地处理该问题的答案。

回答by hobwell

This solution allows you to have a separate menu which mimics the behaviour of the default list when collapsed (http://www.bootply.com/iLLWQZauo5).

此解决方案允许您拥有一个单独的菜单，该菜单在折叠时模拟默认列表的行为 ( http://www.bootply.com/iLLWQZauo5)。

The basic idea is that you need to put your list data in twice and then use a bit of css to display the appropriate list at the appropriate time.

基本思想是你需要把你的列表数据放入两次，然后在适当的时间使用一点css来显示适当的列表。

It requires a bit more code than my other posted solution, but is more flexible for long lists which may extend beyond the length of a mobile screen.

它比我发布的其他解决方案需要更多的代码，但对于可能超出移动屏幕长度的长列表更灵活。

Menu:

菜单：

<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <a class="navbar-brand" href="/LT/">Application name</a>
            <button class="navbar-toggle collapsed" aria-expanded="false" type="button" data-target="#MainMenu" data-toggle="collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <button class="navbar-toggle collapsed" aria-expanded="false" type="button" data-target="#LanguageMenu" data-toggle="collapse">
                EN<b class="caret"></b>
            </button>
        </div>
        <div class="navbar-collapse collapse" id="MainMenu" aria-expanded="false" style="height: 1px;">
            <ul class="nav navbar-nav">
                <li><a href="/LT/">Home</a></li>
                <li><a href="/LT/Home/About">About</a></li>
                <li><a href="/LT/Home/Contact">Contact</a></li>
                <li><a href="/LT/Survey/Instructions">Survey</a></li>
                <li><a href="/LT/LocalizationAdmin/LocalizationAdmin.aspx">Localization</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a id="registerLink" href="/LT/Account/Register">Register</a></li>
                <li><a id="loginLink" href="/LT/Account/Login">Log in</a></li>
              <!--For when the navbar is NOT collapsed-->  
              <li class="collapse-hidden">
                <ul class="nav navbar-nav collapse-hidden">
                  <li class="dropdown">
                      <a class="dropdown-toggle" style="margin-right: 5px;" href="#" data-toggle="dropdown">EN<b class="caret"></b></a>
                      <ul class="dropdown-menu">
                              <li><a href="/LT/Home/Index/">EN</a></li>
                              <li><a href="/LT/Nach Hause/Index/">DE</a></li>
                              <li><a href="/LT/Accueil/Index/">FR</a></li>
                              <li><a href="/LT/Acas?/Index/">RO</a></li>
                      </ul>
                  </li>
              </ul>                         
            </li>
          </ul>
        </div>
        <!--For when the navbar is collapsed-->
        <div class="navbar-collapse uncollapse-hidden collapse" id="LanguageMenu" aria-expanded="false" style="height: 1px;">
            <ul class="nav navbar-nav">
                    <li><a href="/LT/Home/Index/">EN</a></li>
                    <li><a href="/LT/Nach Hause/Index/">DE</a></li>
                    <li><a href="/LT/Accueil/Index/">FR</a></li>
                    <li><a href="/LT/Acas?/Index/">RO</a></li>
            </ul>
        </div>
    </div>
</div>

CSS:

CSS：

/**
 * hide menu items when collapsed
 */
@media screen and (max-width: 767px) {
    .collapse-hidden{
        display: none;
    }
}

 /**
 * hide menu items when NOT collapsed
 */
@media screen and (min-width: 768px){
    .navbar-collapse.collapse.uncollapse-hidden{
        display: none!important;
    }
}

/**
 * set the fore-color of text within navbar-toggle items
 */
.navbar-toggle {
    color: #FFF;
}