css - 调整大小时，Bootstrap 导航栏切换图标栏在标题中的 Logo 下方滑动

Question

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

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>

Answer 1

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

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

.navbar-brand

在您的情况下，它看起来像这样。

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