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

Question

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

 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与此无关，所以除此之外完全在乎。我很乐意帮忙！谢谢！

Answer 1

如果有人为此寻找答案，我深表歉意，但我发现虽然您可以将其放入下拉菜单，但它不会无缝地修复到 bootstrap 布局中。所以，对于那些关注它的人：我不推荐它，它看起来不太好。

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

Bootstrap - Make a dropdown out of navbar-brand that is like navbar-collapse?

html

css

less

twitter-bootstrap

pug