Question

我使用

让我的导航栏在引导程序中更高

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

但是现在活动导航栏链接的背景如下所示 example

如何使图示的灰色背景跨越导航栏的整个高度？我尝试了各种各样的事情，例如增加填充，这确实使它更高，但它实际上并没有延伸到紫色，这就是我想要的。

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

＆＃13;

@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;
}

＆＃13;

<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>

＆＃13;

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说明这一点。

Answer 2

快速解决方法是为您的链接添加负余量。

.navbar a { margin-top: -15px; margin-bottom: -15px;

或许更好的方法是用链接的高度来改变游戏。

.navbar a { height: 100%; margin-top: 0; margin-bottom: 0;

Answer 3

我重新定义了其他三个类的填充和边距，而不是.navbar类：

.navbar-brand
.navbar-toggle
.navbar-nav > li > a

请检查结果：http://jsfiddle.net/glebkema/hwk7kjmo/

＆＃13;

@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;
}

.navbar-brand {
  height: 80px; /* 50px by default */
  padding-bottom: 30px; /* 15px by default */
  padding-top: 30px;
}
.navbar-toggle {
  margin-bottom: 20px; /* 8px by default */
  margin-top: 20px;
  padding-bottom: 12px; /* 9px by default */
  padding-top: 12px;
}
@media (min-width: 768px) {
  .navbar-nav > li > a {
    padding-bottom: 30px; /* 15px by default */
    padding-top: 30px;
  }
}

＆＃13;

<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>

＆＃13;

Bootstrap Navbar链接背景高度

3 个答案: