如何将 Bootstrap 下拉菜单设置为全页宽度？

Question

我需要使用 navbar-fixed-top 修改 Bootstrap 中提供的下拉菜单，使其不是垂直地而是水平地悬停在 li { display: inline-block }（这很容易）上，但是我需要实际的 ul.dropdown-menu 来拉伸页面的整个宽度。我好像搞不懂。

请不要给我megamenu插件或任何东西，我该如何解决它以拉伸整个页面的宽度？ （也不是页面容器，窗口）

实际上，可能还需要包装另一个元素，因为 ul 需要居中。

那么有人知道怎么做吗？

编辑：想通了（发布后 5 分钟）并且没有添加元素：

.nav { margin-bottom: 0; }
.dropdown { position: static; }
.dropdown-menu { width: 100%; text-align: center; }
.dropdown-menu>li { display: inline-block; }

你有它！

Answer 1

首先，您不应将导航栏组件包装在 div.container 中，然后使用以下代码更新 css：

.nav > li.dropdown.open {
    position: static;
}
.nav > li.dropdown.open .dropdown-menu {
    display:table; width: 100%; text-align: center; left:0; right:0;
}
.dropdown-menu>li {
    display: table-cell;
}

在这里查看演示http://www.bootply.com/8EgGsi4F7w

Answer 2

<li class="dropdown open" style="position: initial;">
<ul class="dropdown-menu" style="width: 100%;">

只需使用位置：在导航的主 li(dropdown) 和子 ul 下拉菜单中设置宽度 100%

Answer 3

Check this

.nav > li.dropdown.open {
  position: static;
}

.nav > li.dropdown.open .dropdown-menu {
  display: table;
  border-radius: 0px;
  width: 100%;
  text-align: center;
  left: 0;
  right: 0;
}

.dropdown-menu > li {
  display: table-cell;
  height: 50px;
  line-height: 50px;
  vertical-align: middle;
}

@media screen and (max-width: 767px) {
  .dropdown-menu > li {
    display: block;
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

<div class="navbar navbar-default navbar-static-top">
  <div class="container">

    <div class="navbar-header">
      <div class="navbar-brand">Blackcat</div>
      <button class="navbar-toggle" data-toggle="collapse" data-target=".btnCollapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>

    <div class="collapse navbar-collapse btnCollapse">
      <ul class="nav navbar-nav navbar-right">
        <li class="active"><a href="#">Shop</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Artist <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Rich</a></li>
            <li><a href="#">Shay</a></li>
            <li><a href="#">Jose</a></li>
            <li><a href="#">Marie</a></li>
            <li><a href="#">Simon</a></li>
            <li><a href="#">Jamie</a></li>
            <li><a href="#">Andrew</a></li>
            <li><a href="#">Teddie</a></li>
          </ul>
        </li>
        <li><a href="#">FAQs</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>

  </div>
  <!-- end container -->
</div>
<!-- end navbar navbar-inverse navbar-static-top -->

<!-- container -->
<div class="container">
  <div class="row">
    <p>Site content here...</p>
  </div>
  <!-- End row -->
</div>
<!-- End container -->