Question

TL;博士

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

详情

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

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

这是它在非折叠导航栏中的外观（并且应该继续显示）：

Non-collapsed bootstrap dropdown in menu

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

我在使用此模式的移动设备上遇到问题。下面是用户在点击语言下拉菜单后看到的内容（点击列表按钮后）。注意右边的导航栏？好吧，那个栏没有显示在移动设备上，因此用户不会认为下拉列表没有做任何事情，没有意识到他们必须滚动列表以获得语言选择。

Collapsed and undesirable bootstrap dropdown in menu

我要做的是在列表按钮旁边有一个下拉（如第一张图片中所示），如下图所示，但对于我的生活，我无法弄清楚如何做到这一点。 / p>

Desired layout with the language selector being a drop-down

这是我能够得到的结果，但是副作用是当菜单没有折叠时语言选择器与左对齐。我真的不想要手风琴，我更喜欢下拉式。如果失败了，如果语言选择器以与列表按钮相同的方式打开一个列表（即全长），而不是让它卡在一边，那将是很好的。

Desired layout with the language selector as right-aligned accordion prefixed to the nav list

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

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

我还会发布另一个更优雅地解决问题的答案。

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

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

2 个答案: