Bootstrap - 从 navbar-brand 中创建一个类似于 navbar-collapse 的下拉菜单？答案

【问题标题】：Bootstrap - Make a dropdown out of navbar-brand that is like navbar-collapse?Bootstrap - 从 navbar-brand 中创建一个类似于 navbar-collapse 的下拉菜单？
【发布时间】：2015-04-30 22:37:10
【问题描述】：

我正在尝试将导航栏的标题变成类似于 Bootstrap 中已经存在的导航栏折叠的东西。我设法将标题变成了一个下拉列表，它只跨越一行。完成后，我希望它看起来像（当然，更好）：

 LINK / LINK / LINK / LINK       X(close)

当用户点击时，会像在移动设备上一样弹出一个栏（这将在移动设备和桌面设备上执行）。我希望这有点道理。

一旦我点击下拉部分，我就开始摆弄 LESS，但还是无处可去，所以我很难过。

这是我到目前为止的代码：

  body
    nav.navbar.navbar-default(role='navigation')
      .container
        .navbar-header
          button.navbar-toggle(type='button', data-toggle='collapse', data-target='.navbar-collapse')
            span.sr-only Toggle navigation
            span.icon-bar
            span.icon-bar
        span.icon-bar
          div.dropdown
            a.navbar-brand.dropdown(href='#', data-toggle='dropdown')
              | Title
                    span.caret
            ul.brand-dropdown.dropdown-menu(role='menu')
              li
                a(href=route.auth('custservice')) Customer Service
              li
                a(href=route.auth('help')) Help

        .navbar-collapse.collapse
          form.navbar-form.navbar-left(role='search')
            .inner-addon.left-addon
              a.fa.fa-search.fa-lg(href='', type='submit')
              input.form-control(type='text', placeholder='Search')
          block nav
              ul.nav.navbar-nav.navbar-right
                li
                  a= auth.user().first_name
                li
                  a.fa.fa-shopping-cart.fa-2x(href=route.auth('cart'))

我唯一拥有的 LESS 与此无关，因此除此之外它完全在乎。我很想得到帮助！谢谢！

【问题讨论】：

标签： html css twitter-bootstrap less pug

【解决方案1】：

如果有人正在为此寻找答案，我深表歉意，但我发现虽然您可以将其设置为下拉菜单，但它不会无缝地修补到引导程序布局中。所以，对于那些正在研究它的人：我不推荐它，它看起来不会那么好。

【讨论】：