无法删除菜单项bootstrap下的填充

Question

我似乎无法将菜单中的填充删除或更改。我不希望我的导航栏如此粗壮和大。我删除了顶部填充，但底部没有工作。

这是获得最佳尺寸的代码（菜单边框显示对问题的重视）

.navbar-default .navbar-nav > li > a {
    padding-bottom: 0px; /*<-- does not set the bottom to 0px*/
    padding-top: 0px;
}

https://jsfiddle.net/Manvaril/v97e0u0w/

Answer 1

此处homeApp.controller('characters', function($scope, $http) { $scope.myData = { tab: 0 }; //set default tab $http.get("http://example.com/wp-json/posts?type=character").then(function(response) { $scope.myData.data = response.data; }); }); CSS选择器未选择<li ng-repeat="item in myData.data"> 中的.navbar-default .navbar-nav > li > a元素。因此，您可以将其修改为navbar-brand。 nav-bar锚元素的高度固定。所以也要添加以下CSS规则。

.navbar-default .navbar-nav > li > a, .navbar-default .navbar-brand

Answer 2

因为＆＃34; 导航栏＆＃34; class的 min-height 为50px。它在＆＃34; bootstrap.less＆＃34;文件行号15
从.navbar类中移除min-height：50px 或者在＆＃34; 导航栏默认＆＃34;上添加 min-height：0; 在你的css第45行之后上课。

.navbar-default {
    min-height:0;

}

Answer 3

以下是我将如何调试此问题：

首先检查空白区域：

我看到菜单不应该是48像素高。现在我检查 Home 链接：

所以我想它应该小于48但是大于20.现在我回去工作直到找到导致它变大的元素：

现在检查元素样式并找到源：

所以在navbar.less中看起来存在以下代码：

.navbar {
  min-height: 50px;
}

您需要做的就是在引导程序后的样式表中全局或特别地根据需要覆盖它：

// globally
.navbar {
  min-height: 10px;  // or whatever value
}

// specifically (as best as I can based on your code)
.rgo_wrapper .navbar {
  min-height: 10px;  // or whatever value
}