当调整大小时，Bootstrap导航栏切换图标栏在标题下的徽标下方滑动

我有一个使用导航栏切换图标栏的引导程序导航栏固定顶部。 当我调整浏览器的大小时，图标栏会被推到标志下方，导致导航栏更高，我需要它来强制标志的大小调整，因为它使用的是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>

---

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

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

.navbar-brand

链接地址: http://www.djcxy.com/p/69013.html

上一篇: Bootstrap navbar toggle icon bar sliding underneath logo in header when resized

下一篇: Prevent Toggle Navbar Icon Stacking on Top of Brand Logo