Bootstrap导航栏对齐/ span菜单项占据全宽 [英] Bootstrap navbar justify / span menu items occupying full width

问题描述

我使用默认的Twitter Bootstrap响应式导航栏（没有徽标和搜索），但我希望菜单项能够跨越菜单栏的全部宽度。

I use the default Twitter Bootstrap responsive navbar (without the logo and search), but I want the menu items to be spanned, occupying the full width of the menu bar.

这里是我现在默认的Bootstrap navbar（参见--- as spaces）：

Here is what I have now default Bootstrap navbar (see --- as spaces):

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

和我喜欢的结果（菜单项占用全宽）：

and the result I like to have (menu items occupying the full width):

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

我希望有人可以帮忙。

推荐答案

查看Bootstrap的官方示例：

Have a look at Bootstrap's 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;
}

这篇关于Bootstrap导航栏对齐/ span菜单项占据全宽的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！