bootstrap3折叠导航栏问题,navbar-header溢出

时间:2013-12-01 04:36:57

标签: css twitter-bootstrap twitter-bootstrap-3

我有以下js fiddle。问题是当导航栏折叠时,布局非常混乱(重现只是将窗口大小缩小到iPhone的大小)。我相信这是因为导航栏标题我已经在左侧不断放置,并且折叠的导航栏没有间距:

 <a class="navbar-brand nav-title-logo" href="http://dev.shopious.com/">  </a>

       </div>

对此有任何解决方法吗?

1 个答案:

答案 0 :(得分:1)

另见:Bootstrap 3 Navbar with Logo

您必须根据品牌徽标的高度设置导航栏/导航栏标题的高度:

@media (max-width:767px) 
{
    .navbar, .navbar-header{height: 83px;}
}   

注意将高度设置为100%将不起作用,因为您也使用:

.navbar-default {
    height: 44px;
    background-color: #e06b55;
}

将高度设置为44px似乎会破坏您的布局。

您也不需要:

.nav-collapse > .nav:first-child {
    left: 135px;
}

在你的小提琴中,你使用navbar-collapse in,我期待collapse navbar-collapse