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

我有一个简单的顶部固定导航使用引导3.0，它利用了子菜单功能。我试图让我的子菜单占据容器的全部宽度，而不仅仅是组合子菜单元素的宽度。问题似乎来自

ul.下拉菜单

code，其中宽度设置为~160px；不仅如此，它还拒绝向左延伸，越过下拉菜单选项卡。这是一个问题，因为我的折叠导航设置为位于右侧。哦

下面是我当前解决方案的一部分

HTML:

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

总的目标是有一个全宽度的下拉菜单。目前并不担心它在移动设备上的外观

---

感谢

我使用Yamm3来实现这一点，它很容易集成，并允许您为超大菜单指定全宽

---

我使用Yamm3来实现这一点，它很容易集成，并允许您为mega菜单指定全宽

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

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