Bootstrap 3.2中的对齐导航栏，列表项填充100％高度？答案

【问题标题】：Justified Navbar in Bootstrap 3.2 with list items that fill 100% height?Bootstrap 3.2中的对齐导航栏，列表项填充100％高度？
【发布时间】：2014-08-11 23:17:18
【问题描述】：

我在 Bootstrap 3.2 中创建了一个对齐的导航栏，但我似乎无法让列表项中的链接显示 100% 高度。在这里查看我的 JSFiddle：http://jsfiddle.net/fncage1n/2/

HTML：

<nav class="navbar navbar-default" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button class="navbar-toggle" type="button" data-toggle="collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav nav-justified">
        <li><a href="#">Find your Home</a></li>
        <li class="dropdown" data-toggle="dropdown"><a href="#">New Developments <span class="caret visible-xs"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Poole Road, Sunderland</a></li>
          </ul>
        </li>
        <li class="dropdown" data-toggle="dropdown"><a href="#">Buying from Inspired <span class="caret visible-xs"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Overview</a></li>
            <li><a href="#">Why choose Inspired?</a></li>
            <li><a href="#">Buying Guide</a></li>
            <li><a href="#">Incentives</a></li>
            <li><a href="#">Customer Care</a></li>
          </ul>
        </li>
        <li class="dropdown" data-toggle="dropdown"><a href="#">Help to Buy <span class="caret visible-xs"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Overview</a></li>
            <li><a href="#">Find out if you qualify</a></li>
            <li><a href="#">Other schemes</a></li>
          </ul>
        </li>
        <li><a href="#">Contact us</a></li>
      </ul>
    </div>
  </div>
</nav>

CSS：

.navbar {
    -webkit-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.4);
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.4);
    border: none; }

@media (max-width: 768px) {
.navbar-toggle {
    margin: 10px 20px; } 
}

@media (min-width: 768px) {
.nav-justified > li, .nav-tabs.nav-justified > li {
    display: table-cell;
    vertical-align: middle;
    border-left: 1px solid #598d8d;
    float: none; }

.nav-justified > li:last-child {
    border-right: 1px solid #598d8d; }

/* FOR HIGHLIGHTING PROBLEM ONLY */
.navbar-nav.nav-justified > li a {
    background: #660066; }

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

.dropdown:hover .dropdown-menu {
    display: block;
    min-width: 100%; }

.dropdown-menu > li > a {
    font-size: 14px;
    padding: 5px 20px;
    transition: 0; }

.dropdown-menu > li > a:hover {
    color: #fff; }

.dropdown-menu, .follow-us .dropdown-menu {
    padding-top: 10px;
    padding-bottom: 10px; } 
}

仅在以平板电脑大小查看时才会出现此问题，因为某些菜单项中的文本跨越超过 1 行。适合 1 行的菜单项，然后不填充 100% 的导航栏高度 - 我已将链接的背景突出显示为紫色，以便您无需悬停即可更好地查看它。

谁能发现我哪里出错了？任何反馈将不胜感激！

【问题讨论】：

标签： html css

【解决方案1】：

您可以在您的媒体查询min-width: 768px 中通过重置.nav>li>a 填充来修复此问题，如下所示：

CSS：

 .nav-justified > li a, .nav-tabs.nav-justified > li a{
     padding:15px 0; 
 }

演示：http://jsfiddle.net/fncage1n/5/

【讨论】：