Question

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

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

       </div>

对此有任何解决方法吗？

Answer 1

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

@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