Twitter bootstrap 引导：如何使所有<；李>；等高

如何使所有的

高度相等？（在所有的窗口尺寸上-手机除外）我尝试使用flexbox，但不知怎么的，我做错了什么。flexbox是实现这一目标的最佳方法还是有其他方法？提前谢谢

HTML

---

小提琴：

如果不是所有的引导冲突，flexbox确实是达到同等高度的好方法：我错过了什么吗？它们看起来都有相同的高度。看看可能的重复：@RachelS我很抱歉不清楚，我也希望在平板电脑大小上高度相同。如果不是因为所有的引导冲突，flexbox确实是达到相同高度的好方法：我遗漏了什么吗？它们看起来都一样高。看看可能的重复：@RachelS我很抱歉不清楚，我希望在平板电脑大小上高度也一样。

<nav class="navbar navbar-default">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
        <a class="navbar-brand visible-xs" href="#">JIJWIJ</a>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav nav-justified navbar-nav">
                <li class="hidden-xs nav-nohover"><a href="#">&nbsp;</a>
                <li class="hidden-xs nav-nohover"><a href="#">&nbsp;</a>
                <li class="hidden-xs nav-nohover"><a href="#">&nbsp;</a>
                <li class="hidden-xs nav-nohover"><a href="#">&nbsp;</a>
                <li><a href="#">home</a>
                </li>
                <li><a href="#">about blabla</a>
                </li>
               <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">my blablabla <span class="caret"></span></a>
                  <ul class="dropdown-menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li role="separator" class="divider"></li>
                    <li class="dropdown-header">Nav header</li>
                    <li><a href="#">Separated link</a></li>
                    <li><a href="#">One more separated link</a></li>
                  </ul>
                </li>
                <li><a href="#">my other blablabla</a>
                </li>
                <li><a href="#">bla &amp; blablabla</a>
                </li>
                <li><a href="#">handy blabla</a>
                </li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">contact <span class="caret"></span></a>
                  <ul class="dropdown-menu pull-right">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li role="separator" class="divider"></li>
                    <li class="dropdown-header">Nav header</li>
                    <li><a href="#">Separated link</a></li>
                    <li><a href="#">One more separated link</a></li>
                  </ul>
                </li>
      </ul>
    </div>
</nav>

.navbar-nav {
  width: auto;
  height: auto;
}

.navbar-default {
  padding-top: 0px;
  background: #eb6909;
  border: none;
  color: #fff;
}

.navbar-nav>li {
  float: none;
  height: 100%;
}

.navbar-default .navbar-nav>li>a {
  color: #ffffff;
}

.navbar-nav li:nth-child(1) a {
  background-color: #eb6909;
}

.navbar-nav li:nth-child(2) a {
  background-color: #ef7f01;
}

.navbar-nav li:nth-child(3) a {
  background-color: #e85011;
}

.navbar-nav li:nth-child(4) a {
  background-color: #e40061;
}

.navbar-nav li:nth-child(5) a {
  background-color: #e12d85;
}

.navbar-nav li:nth-child(6) a {
  background-color: #013F8a;
}

.navbar-nav li:nth-child(7) a {
  background-color: #25afe0;
}

.navbar-nav li:nth-child(8) a {
  background-color: #189fd6;
}

.navbar-nav li:nth-child(9) a {
  background-color: #00a7ad;
}

.navbar-nav li:nth-child(10) a {
  background-color: #54b9a7;
}

.navbar-nav li:nth-child(11) a {
  background-color: #27a22d;
}

.nav-nohover {
  pointer-events: none;
}

.navbar-nav>li.dropdown>ul.dropdown-menu>li {
  display: block;
}

.navbar-nav>li.dropdown>ul.dropdown-menu,
.navbar-nav>li.dropdown>ul.dropdown-menu>li,
.navbar-nav>li.dropdown>ul.dropdown-menu>li a {
  background-color: #fff;
}

@media (min-width: 768px) {
  .navbar-collapse {
    padding: 0px;
  }
}