Question

我想用引导程序构建一个navbar，其中的所有单元格都具有相同的宽度。

我尝试了上面的代码，但它不能很好地运行。我该如何解决？

.navbar-collapse {
    padding-left: 0;
    padding-right: 0;
}

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

.navbar .nav > li {
    float: right;
    display: table-cell;
    width: auto;
    float: none;
    text-align: center;
    direction: rtl;
}
.navbar .nav > li:hover {
background-color: #808080
}

.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 333px 3px 0;
}

示例：http://jsfiddle.net/abzvw0m3/（当屏幕宽度大于768像素时）

Answer 1

将其更改为此，所有li元素的父元素宽度均为10％。

.navbar .nav > li {
    float: right;
    display: inline-block;
    width: auto;
    float: none;
    text-align: center;
    direction: rtl;
    width:10%;
    font-size:12px;
}

Answer 2

要获得相同的单元格宽度，您必须设置ul.nav规则table-layout: fixed;

.navbar .nav {
    margin: 0;
    display: table;
    width: 100%;
    direction: rtl;
    table-layout: fixed; 
}

.navbar ul.nav  li {
    float: right;
    display: table-cell;
    width: 100%;
    float: none;
    text-align: center;
    direction: rtl;
}

<强> DEMO HERE

Answer 3

尝试添加宽度

.navbar .nav > li {
float: right;
display: table-cell;
width: auto;
float: none;
text-align: center;
direction: rtl;
width: 15%;;    /* add the width use % for dinamic**/
}

Answer 4

将您的li更改为具有与您将使用的最大li相似的值的固定宽度或百分比宽度，

例如：

width: 132px;

或

width: 20%;

将所有<li>设置为具有相同的宽度

4 个答案: