Question

我有一个使用导航栏切换图标栏的bootstrap导航栏固定顶部。当我调整浏览器的大小时，图标栏被推到徽标下方，这使得导航栏更高，我需要它来强制徽标调整大小，因为它使用img-responsive类并保持导航栏高50px。我尝试将包装器Div设置为溢出：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的内置仿真器来测试不同的设备尺寸或许多基于网络的实用程序。

第二，如果标题图像是徽标或品牌形象，您可以随时使用Bootstrap的内置类

＆＃13;

.navbar-brand

＆＃13;

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

＆＃13;

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

＆＃13;

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

HTML

1 个答案: