Question

我正在使用Twitter bootstrap，我正在尝试自定义Navbar。

我有一个JSFiddle here。 Navbar的高度为75px，但内容的高度不会改变。

这是我的HTML全部内容：

<!DOCTYPE html>

<html>

<head>
<link href="dist/css/bootstrap.css" rel="stylesheet">
</head>

<body>

<div class="container">
    <div class="row">
        <div>
            <h4>Navbar</h4>

            <div class="navbar navbar-default">
                <div>
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#">Home</a></li>
                        <li ><a href="#">About</a></li>
                        <li ><a href="#">Products</a></li>
                        <li ><a href="#">Services</a></li>
                        <li ><a href="#">Contact</a></li>
                    </ul>
                </div>
            </div>

        </div>
    </div>
</div>

</body>

</html>

如您所见，我使用的唯一CSS文件是bootstrap.css，我从Twitter Bootstrap主页下载（使用Download Bootstrap按钮）。我所做的唯一改变是：

.navbar {
  position: relative;
  /* Old min height
  min-height: 50px;
  */
  min-height: 75px;
  margin-bottom: 20px;
  border: 1px solid transparent;
}

我尝试更改导航栏默认，导航和导航栏导航的高度，没有任何效果！

我需要在bootstrap.css中更改什么才能使Navbars内容与Navbar本身的高度相匹配？

Answer 1

您可以使用line-height或padding让内容填充元素的高度。

例如：

.navbar .navbar-nav > li > a {
    line-height: 45px;
}

http://jsfiddle.net/GH9mV/3/

或者：

.navbar .navbar-nav > li > a {
    padding: 27px 15px;
}

http://jsfiddle.net/GH9mV/5/

这两个都可以解决问题，但line-height是一个更容易控制和衡量的选项，所以我会推荐它。

请注意，我使用了一个相当具体的选择器..这是因为line-height和padding已经在bootstrap css中的这些元素上建立，而不是你需要的数量。我的选择器的特殊性允许我覆盖这些样式，或者你也可以跟踪它们并在bootstrap css中编辑它们。

Answer 2

要更改.navbar内容的高度，您需要增加锚标记的高度。

在CSS声明中添加以下内容：

@media (min-width: 768px) {
  .navbar-nav > li > a {
    padding-top    : 0;
    padding-bottom : 0;
    height      : 75px;
    line-height : 75px; /* align the line center vertically */
  }
}

我使用@media查询仅在更高分辨率上应用这些CSS声明。

以下是 Working Demo 。

Answer 3

锚标记的行高是控制导航栏高度的高度，而不是周围div的最小高度。默认情况下，Bootstrap具有以下设置：

.navbar-nav > li > a {
    line-height: 20px;
}

将其更改为此，例如：

.navbar-nav > li > a {
    line-height: 45px;
}

...并确保删除你对最小高度的更改。

顺便说一句，锚标签的顶部和底部边距已经设置为15px。这就是为什么要将行高设置为45px而不是75px的原因。 45 + 15 + 15 = 75。

如何使导航栏内容与导航栏的高度相同？

3 个答案: