html - Bootstrap navbar justify / span 占据全宽的菜单项

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

我希望有人能帮帮忙。

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

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

Answer 3

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

" width: auto; " 为我解决了这个问题

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

}

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”下面的容器。您还必须在调整窗口大小时调用此函数，而不是它的工作原理！

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>

结果：