Question

我使用以下代码降低了顶部导航栏的高度：

.navbar-nav > li > a {padding-top:10px !important; padding-bottom:10px   !important;}
.navbar {min-height:40px !important}

这很好用。但是，当我缩小浏览器窗口以测试响应性时，导航栏会快速恢复到完整（默认）50px高度。

我对代码不够熟悉，无法找到我要找的东西。谁能帮我吗？谢谢！

Answer 1

添加媒体查询

@media (max-width:768px){
.navbar-nav > li > a {padding-top:10px !important; padding-bottom:10px   !important;}
.navbar {min-height:40px !important}
}

您可能必须将高度包含在自动内容中，而不是写入它。所以身高：自动或身高：40px，

已更新

对不起上面的内容可能无效，试试这个：

@media (max-width:768px){
.navbar-nav > li > a {padding-top:10px !important; padding-bottom:10px   !important;}
.navbar {max-height:40px !important; min-height:30px}
}

使用最小高度限制最小高度，当你应该使用最大高度时

Bootstrap 3 - 更改了导航栏高度，但响应版本没有变化

1 个答案:

已更新