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

我希望有人能帮帮忙.

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菜单子集.

/* 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; "为我解决了这个问题