如何在折叠的 bootstrap 导航栏菜单的 header 中放置下拉列表

Question

tl;dr

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

详情

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

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

这是它在 non-collapsed 导航栏中的样子（并且应该继续这样）：

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

我运行使用此模式在移动设备上遇到问题。下面是用户在点击语言下拉列表后（点击列表按钮后）看到的内容。注意到右边的 nav-bar 了吗？好吧，该栏不会在移动设备上显示，因此用户会认为 drop-down 不会执行任何操作，而没有意识到他们必须滚动列表才能找到语言选项。

我想要做的是在列表按钮旁边有一个下拉菜单（如第一张图片所示），如下图所示，但我这辈子都不知道该怎么做.

这是我所能得到的关闭，但这样做的副作用是当菜单未折叠时语言选择器向左对齐。我真的不想要手风琴，我更喜欢 drop-down。如果做不到这一点，如果语言选择器打开列表的方式与列表按钮的方式相同（ie.full 宽度），而不是让它卡在一边就好了。

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

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

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

Answer 1

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

基本思路是将页眉分为左侧和右侧，并将下拉菜单直接放在右侧页眉中，这样合拢样式就不会应用到它。它需要一点 css 才能使所有内容正确显示为内联。您的里程可能会有所不同。

首先是菜单：

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

然后 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;
}

我也会 post 另一个更优雅地处理问题的答案。

Answer 2

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

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

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

菜单：

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

/**
 * 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;
}

如何在折叠的 bootstrap 导航栏菜单的 header 中放置下拉列表

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

asp.net-mvc

twitter-bootstrap

asp.net-mvc-5

twitter-bootstrap-3