更改导航栏高度会破坏响应式崩溃？答案

【问题标题】：Changing navbar height breaks responsive collapse?更改导航栏高度会破坏响应式崩溃？
【发布时间】：2013-11-23 22:17:51
【问题描述】：

我成功降低了导航栏的高度，但在调整浏览器大小后 - 响应式折叠中断。

通常，如果它处于折叠模式，它会扩展导航栏区域，因此所有下拉菜单都在其中。更改导航栏的高度后，它会跳出 div 并丢失大部分属性

是否有任何“教程”或指南如何在不破坏响应性的情况下成功更改导航栏的高度。

使用的代码：

.navbar, .navbar-header, .navbar-brand, .navbar-nav, 
.navbar-nav ul, .navbar-nav li, .navbar-nav>li>a {
    margin-top: 0px;
    min-height: 28px;
    height: 28px;
    padding: 1px 5px 1px 5px
}

JSFiddle

【问题讨论】：

你能在jsfiddle中设置吗
jsfiddle.net/w8ABj

标签： twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

使用媒体查询仅为@grid-float-breakpoint 上方的屏幕宽度设置高度

少：

@media(min-width:@grid-float-breakpoint)
{   
.navbar {min-height:200px;}
}

CSS：

@media(min-width:768px)
{   
.navbar {min-height:200px;}
}

另请参阅http://bootply.com/96446（基于您的 jsfiddle 中的代码）

【讨论】：

我认为更多的问题是我还没有找到要更改的确切类。我所做的一些更改也限制了“epxansion”大小，导致下拉区域位于原始 DIV 之外
我需要添加 include {.navbar .navbar-inner {min-height:200px;}} 以使其工作。 @Slidemouth 即使您在 Less 中更改 @navbar-height？

【解决方案2】：

这是您可以使用的 CSS：

/* Navbar height */
.navbar {
    min-height: 28px;
}
.navbar-brand,
.navbar-nav>li>a {
    line-height: 26px;
    padding: 1px 5px;
}
/* Toggle button size */
.navbar-toggle {
    margin: 4px;
    padding: 4px;
}
.navbar-toggle .icon-bar {
    width: 14px;
}
.navbar-toggle .icon-bar+.icon-bar {
    margin-top: 2px;
}

Updated JSFiddle

注意：我在导航栏上放了一个margin-top 以避免出现“结果”标签。

【讨论】：