调整大小时，引导导航栏切换图标栏在标题中的徽标下方滑动答案

【问题标题】：Bootstrap navbar toggle icon bar sliding underneath logo in header when resized调整大小时，引导导航栏切换图标栏在标题中的徽标下方滑动
【发布时间】：2016-06-15 22:18:26
【问题描述】：

我有一个使用导航栏切换图标栏的引导导航栏固定顶部。当我调整浏览器的大小时，图标栏被推到使导航栏更高的徽标下方，我需要它来强制调整徽标的大小，因为它使用 img-responsive 类并保持导航栏 50px 高。我尝试将包装器 Div 设置为溢出：自动，这里有人在另一个问题中提出了建议，但没有用。

HTML

 <div style="overflow:auto;">
    <nav class="navbar navbar-default navbar-fixed-top navbar-header-full">

        <div class="header-full-title img-responsive">
            <img src="/Content/img/MTC_logo_header.png" class="img-responsive" />
        </div>
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div id="navbar" class="navbar-collapse collapse">


            <ul class=" nav navbar-nav navbar-right">
                <li><a href="#" class="navStyle">OUR STORY</a></li>
                <li><a href="#" class="navStyle">VISIT</a></li>
                <li><a href="#" class="navStyle">DIRECTORY</a></li>
                <li><a href="#" class="navStyle">CONDOS</a></li>
                <li><a href="#" class="navStyle">APARTMENTS</a></li>
                <li class="dropdown">
                    <a href="#" class="navStyle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">EVENTS</a>
                    <ul class="dropdown-menu dropDownMTC pull-right">
                        <li><a href="#">YOGA ROCKS THE PARK</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">MONDAY NIGHT MOVIES</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">HORSES OF HONOR</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">THURSDAY IN THE PARK</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">EVENT SHUTTLE</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">HOLIDAY LIGHTS FESTIVAL</a></li>
                    </ul>
                </li>
                <li><a href="#" class="navStyle">NEWS</a></li>
            </ul>
        </div>
    </nav>
 </div>

【问题讨论】：

看看这个example
Bootstrap 3 Navbar with Logo的可能重复
我不想使用品牌类，我需要让它与我目前的设计配合使用。
但是为什么呢？你也可以试试pull-left class，看看是否有任何改变
pull-left 没有任何作用。

标签： css html twitter-bootstrap

【解决方案1】：

现在，如果您在谈论包装。请记住，在某些情况下，某些尺寸的事物可能看起来并不像您希望的那样，但目标是关注常见的屏幕尺寸，因为很有可能没有人会看到这个问题。您可以使用 Chrome 的内置模拟器来测试不同的设备尺寸，或者使用一些基于 Web 的实用程序。

其次，如果标题图像旨在成为徽标或品牌形象，您可以随时利用 Bootstrap 的内置类

.navbar-brand

在你的情况下看起来像这样。

<a href="#" class="navbar-brand">
  <div class="header-full-title">
    <img src="http://via.placeholder.com/100x50" />
  </div>
</a>

【讨论】：