twitter-bootstrap 不使用 MegaMenu 的 Bootstrap 3 中的全宽子菜单

Full width submenu in Bootstrap 3 without using MegaMenu

提问by itsclarke

I have a simple top-fixed nav using Bootstrap 3.0 which utilizes the submenu feature. I'm attempting to have my submenu take up the full width of the container, not just the width of the combined submenu elements. The problem appears to be coming from the ul.dropdown-menucode in which the width is set to ~160px; Not only that, but it refuses to extend left, past the dropdown menu tab. This is a problem because my collapse-nav is set to sit on the right side. Oy.

我有一个简单的顶部固定导航，使用 Bootstrap 3.0，它利用了子菜单功能。我试图让我的子菜单占据容器的整个宽度，而不仅仅是组合子菜单元素的宽度。问题似乎来自ul.dropdown-menu将宽度设置为 ~160px 的代码；不仅如此，它还拒绝向左延伸，越过下拉菜单选项卡。这是一个问题，因为我的折叠导航设置在右侧。哎呀。

Below is a fiddle of my current solution.

以下是我当前解决方案的小提琴。

FIDDLE FIDDLE, YA'LL

小提琴小提琴，你们

HTML:

HTML：

<div class="navbar navbar-default navbar-fixed-top" role="navigation">

  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="index.html"></a>
    </div>
    <div class="navbar-collapse collapse pull-right">
      <ul class="nav navbar-nav">
        <li class="dropdown active">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Films <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <div class="container">
              <ul class="list-inline">
                <li class="placeholder" id="pause"><a href="#"></a></li>
                <li class="placeholder" id="hiccup"><a href="#"></a></li>
                <li class="placeholder"><a href="#"></a></li>
                <li class="placeholder"><a href="#"></a></li>
                <li class="placeholder"><a href="#"></a></li>
                <li class="placeholder"><a href="#"></a></li>
              </ul>
            </div>
          </ul>
        </li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</div>

CSS (sorry it's so specific, I'm using SASS):

CSS（对不起，它太具体了，我使用的是 SASS）：

.navbar.navbar-default.navbar-fixed-top {
  background-color: #454545;
  border: none; 
  }
.navbar.navbar-default.navbar-fixed-top .container .navbar-collapse.collapse.pull-right ul.nav.navbar-nav li.active a, .navbar.navbar-default.navbar-fixed-top .container .navbar-collapse.collapse.pull-right ul.nav.navbar-nav li a:hover {
  color: #ffcc00;
  background-color: #454545;
  height: inherit; 
  }
.navbar.navbar-default.navbar-fixed-top .container .navbar-collapse.collapse.pull-right ul.nav.navbar-nav li.dropdown.active.open ul.dropdown-menu {
  list-style-type: none;
  width: 100%;
  background-color: white; 
  }
.navbar.navbar-default.navbar-fixed-top .container .navbar-collapse.collapse.pull-right ul.nav.navbar-nav li.dropdown.active.open ul.dropdown-menu .container {
  background-color: white; 
  }
.navbar.navbar-default.navbar-fixed-top .container .navbar-collapse.collapse.pull-right ul.nav.navbar-nav li.dropdown.active.open ul.dropdown-menu .container ul.list-inline {
  list-style-type: none;
  width: 100%; 
  }
.navbar.navbar-default.navbar-fixed-top .container .navbar-collapse.collapse.pull-right ul.nav.navbar-nav li.dropdown.active.open ul.dropdown-menu .container ul.list-inline li.placeholder {
  margin: 0 20px;
  height: 100px;
  width: 70px;
  background-color: #999999; 
  }

So far the closest solution I've come across is adding a container within the dropdown menu, however I'm still unable to extend the dropdown menu beyond it's ~160px width.

到目前为止，我遇到的最接近的解决方案是在下拉菜单中添加一个容器，但是我仍然无法将下拉菜单扩展到大约 160 像素的宽度。

The general goal is to have a full-width dropdown menu. Currently not worried about what it looks like on mobile devices.

总体目标是拥有一个全角下拉菜单。目前不担心它在移动设备上的样子。

Thanks

谢谢

回答by Evonet

I use Yamm3 to do this, it's quite easy to integrate and allows you to specify a full width for your mega menu.

我使用 Yamm3 来做到这一点，它很容易集成，并允许您为大型菜单指定全宽。

http://geedmo.github.io/yamm3/

http://geedmo.github.io/yamm3/