html - 相等的 LI 宽度填充 100% 宽度

Question

我想让每个 LI 的宽度相等，并在 Bootstrap 选项卡上填充 100% 的宽度。

我一直在读你需要拥有的东西

ul{display:table}
li{display:table-cell}

但这对我不起作用，我不确定是不是 Bootstrap 导致的。但我需要能够容纳 3 - 5 个选项卡，具体取决于产品页面。

我这里有一把 fiddle http://jsfiddle.net/xQ8Q8/1/显示我正在尝试做的事情。

Answer 1

.nav-tabs>li 中定义了一个float: left。在您的 CSS 中设置 float: none 以覆盖该行为:

.nav-tabs > li {
    float: none;
}

现在您必须更正 UL 高度:

#productReviewTab {
    display: table;
    width: 100%;
    margin-bottom: 31px; // Just to maintain your initial height
}

是的，我删除了 height 属性，如果你愿意，你可以将它设置为 44px。对于我测试的，是一样的。