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

Question

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

下面是我当前解决方案的一个小提琴。

FIDDLE FIDDLE, YA'LL

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（抱歉太具体了，我用的是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; 
  }

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

总体目标是提供全角下拉菜单。目前不担心它在移动设备上的外观。

谢谢

Answer 1

我使用 Yamm3 来执行此操作，它很容易集成，并允许您为大型菜单指定全宽。

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