Bootstrap导航栏：菜单项占据整个宽度的两种方法

Question

我使用默认的Twitter Bootstrap响应式导航栏（没有标志和搜索），但我希望菜单项被跨越，占据整个菜单栏的宽度。

这是我现在拥有的默认Bootstrap导航栏（请参见---作为空格）：

[home | menu item 1 | menu item 2 | menu item 3 | contact------------------------]

我希望得到的结果是（菜单项占据整个宽度）：

[--home-- | ---menu item 1--- | ---menu item 2--- | ---menu item 3--- | -contact-]

我希望有人能够帮忙。

- user2024774

Answer 1

看看 Bootstrap 的官方示例：

/* Customize the navbar links to be fill the entire space of the .navbar */
.navbar .navbar-inner {
    padding: 0;
}

.navbar .nav {
    margin: 0;
    display: table;
    width: 100%;
}

.navbar .nav li {
    display: table-cell;
    width: 1%;
    float: none;
}

.navbar .nav li a {
    font-weight: bold;
    text-align: center;
    border-left: 1px solid rgba(255, 255, 255, .75);
    border-right: 1px solid rgba(0, 0, 0, .1);
}

.navbar .nav li:first-child a {
    border-left: 0;
    border-radius: 3px 0 0 3px;
}

.navbar .nav li:last-child a {
    border-right: 0;
    border-radius: 0 3px 3px 0;
}

- sgrodzicki

---

这在屏幕较窄时看起来并不好... 你有什么解决办法吗？ - clifgray

我不得不在我的li > a链接文本中用 替换空格，以使其不换行。 - Matthew Lock

Answer 2

官方示例在您想要使用本地下拉调用的菜单项时表现完美。但是，下拉菜单的宽度将变为所有下拉菜单项的宽度之和。

*请注意">"，它将防止样式溢出到.dropdown-menu子集中。

/* Customize the navbar links to be fill the entire space of the .navbar */

.navbar .navbar-inner {
    padding: 0;
}

.navbar .nav {
    margin: 0;
    display: table;
    width: 100%;
}

.navbar .nav > li {
    display: table-cell;
    width: 1%;
    float: none;
    text-align: center;
}


.navbar .nav li:first-child a {
    border-left: 0;
    border-radius: 3px 0 0 3px;
}

.navbar .nav li:last-child a {
    border-right: 0;
    border-radius: 0 3px 3px 0;
}

- Seif Thompson-Doss

Answer 3

.nav {
  display:table;
}
.nav > li{
  width: auto;
  display:table-cell;
}

"width: auto;" 对我解决了问题。

- Veikko Karsikko

Answer 4

另一个解决方案是：使用媒体查询来调整每个菜单项的填充。

@media (max-width: 1200px) {

  .navbar .nav > li {
      padding: 0 4px 0 3px;
  }

}

@media (min-width: 1200px) {

  .navbar .nav > li {
      padding: 0 20px 0 20px;
  }

}

- Jonathan James

Answer 5

这个例子对我也不起作用，下拉菜单总是出现在第一个li元素处。使用jQuery设置主要li元素的宽度是唯一有效的方法，如下所示：

setNavWidth: function(){
    var wi = parseInt(($('#navcontainer').width()-48)*.25);
    for( var i = 0 ; i < 4; i++){
        $('#carvernavli_'+i).width(wi);
    }

}

所以我有4个主要的li元素，并给它们一个id，"navcontainer"是包含导航的容器，直接放在"navbar-inner"下面。 当窗口大小改变时，你还需要调用此函数，然后它才能正常工作！

- Ray

Answer 6

最终我使用了一个略微不同的变体，我不喜欢使用display:table，而是想使用flexbox。

CSS：

.navbar .nav {
    margin: 0;
    display: flex;
    flex-direction: row;
    width: 85%;
}

.navbar .nav li {
    flex: 1;
}

.navbar .nav li a {
    font-weight: bold;
    text-align: center;
    flex: 1;
}

HTML：

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container-fluid">
      {% block header %}
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
          <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="/">MySite</a>
      </div>
      <div id="navbar" class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
          <li><a href="/">Home</a></li>
          <!-- <li><a href="/submit">Submit</a></li> -->
          <li><a href="/vendors">Vendors</a></li>
          <li><a href="/news">News</a></li>
          <li><a href="/about">About</a></li>
          <form class="navbar-form navbar-left" action="/action_page.php">
            <div class="input-group">
              <input type="text" class="form-control" placeholder="Search">
              <div class="input-group-btn">
                <button class="btn btn-default" type="submit">
                  <i class="glyphicon glyphicon-search"></i>
                </button>
              </div>
            </div>
          </form>
        </ul>
      </div><!--/.nav-collapse -->
      {% endblock %}
    </div>
  </nav>

结果：

- Tim P