【问题标题】: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

【问题讨论】:

标签: 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 以避免出现“结果”标签。

【讨论】:

    猜你喜欢
    • 2020-12-05
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2010-10-27
    • 1970-01-01
    • 2016-09-23
    • 1970-01-01
    相关资源
    最近更新 更多