bootstrap 3折叠导航栏问题，导航栏标题溢出

Posted 2023-03-06

【中文标题】bootstrap 3折叠导航栏问题，导航栏标题溢出

【英文标题】：bootstrap3 collapsed navbar issue with navbar-header that overflows

【发布时间】：2013-12-17 00:12:05

【问题描述】：

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

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

       </div>

有什么解决办法吗？

【问题讨论】：

对不起。我不明白发生了什么。折叠时看起来不错！ screencloud.net/v/wSsu

@nahtnam 问题出在您打开折叠菜单时

好的，这是我看到的screencloud.net/v/rkaS有什么问题？

您在徽标上使用了桌面样式。在最小宽度的桌面媒体查询中设计您的徽标，并在这些媒体查询之外放置移动设备上的徽标样式。

@nahtnam 让它更小，宽度为 320

【参考方案1】：

另请参阅：Bootstrap 3 Navbar with Logo

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

@media (max-width:767px) 

    .navbar, .navbar-headerheight: 83px;
   

注意将高度设置为 100% 在这里不起作用，因为您也使用：

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

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

你也不需要：

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

在你的小提琴中你使用：navbar-collapse in 我期望collapse navbar-collapse