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的official example：

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

官方示例完美无缺，直到您想要将这些菜单项与本机下拉调用一起使用。下拉列表将成为所有下拉项目的总宽度。

*注意“＆gt;”，它会使样式停止流入.dropdown菜单子集。

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

这里的最后一个例子，对我来说也不起作用，dropdownmenu总是出现在第一个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>

结果：

Bootstrap导航栏对齐/跨度菜单项占据全宽

6 个答案: