为什么我不能强制ul表现为表行？

Question

我正在使用bootstrap3，我希望有一个navbar，其中所有nav项都在条的整个宽度上间隔开。

要实现此目的，我唯一的选择就是让条形图分别表示table，-row -cell。

我有正确的标记＆amp; css，但显然我不能在display: table-row;上强制ul。

Live Example

奇怪的是：

• firefox＆amp;铬报告虽然table-row是最重要的规则，但它们适用block

  

• 仅当我包含bootstrap3（尝试在实例中尝试切换）
时才会发生这种情况

HTML

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav">
        <li class="">
            <a href="#">Homeen</a>
        </li>
        <li class="">
            <a href="#">News</a>
        </li>   
    </ul>
</div>

CSS

.collapse.navbar-collapse {
  display: table !important;
  width: 100%;
}
.navbar .nav {
  display: table-row !important;
  width: 100%;
  background: #fff;
}
.navbar .nav > li {
  display: table-cell !important;
  background: #39f;
  float: none;
}

Answer 1

让它变成一个桌子人。

为了使这项工作没有任何浏览器错误，您将不得不编写的所有疯狂代码将比表标记更难看。

Answer 2

我已经弄明白了

我只需要取消.nav

.nav {
   float: none;
}

Working example

叹息，又一个失去的时刻。但我会提出这个问题，也许这可以节省一些人的时间。