Question

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

以下是我当前解决方案的一小部分。

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

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

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

由于

Answer 1

我使用Yamm3来实现这一点，它很容易集成，并允许您为超级菜单指定一个完整的宽度。

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

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

1 个答案: