html - Bootstrap Navbar 链接背景高度

Question

我使用 bootstrap 使我的导航栏更高

.navbar {
    padding-top: 15px;
    padding-bottom: 15px;
}

但是现在事件导航栏链接的背景看起来像这样

如何让图片中的灰色背景覆盖导航栏的整个高度？我尝试了各种方法，例如增加填充，这确实使它更高，但它实际上并没有延伸到紫色之上，这正是我想要的。

此处示例:http://jsfiddle.net/pjxd9cka/

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');

.navbar {
  padding-top: 15px;
  padding-bottom: 15px;
  border: 0;
  border-radius: 0;
  margin-bottom: 0;
  font-size: 12px;
  letter-spacing: 5px;
}

<header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="banner">
  <div class="container">
    <div class="navbar-header">
      <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a href="./" class="navbar-brand">Bootstrap 3 Menu Generator</a>
    </div>
    <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
      <ul class="nav navbar-nav">
        <li>
          <a href="#">Getting started</a>
        </li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></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><a href="#">Separated link</a></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
        <li>
          <a href="#">Components</a>
        </li>
        <li>
          <a href="#">JavaScript</a>
        </li>
        <li class="active">
          <a href="#">Customize</a>
        </li>
      </ul>
    </nav>
  </div>
</header>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Answer 1

事件元素是产生高亮颜色的元素，这意味着如果你想让事件元素变大，你需要把它变大。

一种解决方案是将额外的填充添加到菜单内的 a 元素，而不是添加到外部菜单容器。由于 bootstrap 的默认内边距是 15px，因此您需要将其顶部和底部设为 15+15=30px。对于不同的媒体屏幕尺寸，它也可能是不同的填充。执行此操作后，为了保持 navbar-header 对齐，您还需要在其顶部添加边距。

.navbar {
  border: 0;
  border-radius: 0;
  margin-bottom: 0;
  font-size: 12px;
  letter-spacing: 5px;
  background-color: teal;
}
.navbar-header {
  margin-top: 15px;
}
.nav li a {
  padding-top: 30px;
  padding-bottom: 30px;
}

这是一个 fiddle说明这一点。