为什么不能强迫ul充当表行？

Question

I am using bootstrap3 , and I would like to have a navbar , where all nav items are spaced through the whole width of the bar.

To achieve this my only option was to make the bar behave like a table , -row , respectively -cell .

I've got the right markup & css, but apparently somehow I cannot force display: table-row; on my ul .

Live Example

Odd thing is that:

• Both firefox & chromium report that although table-row is the most important rule, they apply block

  

• This only happens when I include bootstrap3 (try toggling it in the live example)

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

Just make it a table man.

All the crazy code you're going to have to write to make this work without any browser bugs is going to be far more ugly than a table tag.

Answer 2

I've figured it out

I just had to unfloat .nav

.nav {
   float: none;
}

Working example

Sigh , another lost hour. But I will leave the question up, maybe it saves someone's time.