Question

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

通常，如果它处于折叠模式，它会扩展导航栏区域，因此所有下拉列表都在其中。更改导航栏的高度后，它跳出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

Answer 1

使用媒体查询仅为@ grid-float-breakpoint

上方的屏幕宽度设置高度

LESS：

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

CSS：

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

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

Answer 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以避免使用“结果”标签。

更改导航栏高度会导致响应崩溃？

2 个答案: