在调整窗口大小时如何避免徽标更改位置？

Question

我正在使用Bootstrap navbar ，调整大小后汉堡包菜单显示徽标会改变其位置甚至溢出navbar 。 如何使徽标响应，以便在窗口中调整navbar大小时更改其大小或位置？

        <!-- Navigation Bar -->
    <div class="navbar navbar-default" id="navbar-outer">
<div class="container-fluid" style="margin:0px;">


           <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu">
   <span class=" glyphicon glyphicon-menu-hamburger"></span>
                </button>
           </div>
                <a class="navbar-brand" href="#">
                     <img src="../images/LOL_LOGO_NEW-01.png" />
                </a>
     <div class="collapse navbar-collapse" id="menu"> 
            <ul class="navbar navbar-nav" id="navbar-menu">
                <li><a href="#" >WHAT WE DO</a></li>
                <li><a href="#">WHO WE ARE</a></li>
                <li><a href="#">OUR WORK</a></li>
                <li><a href="#">VENTURES</a></li>
                <li><a href="#">BLOG</a></li>
                <li><a href="#">CONNECT</a></li>
            </ul>
    </div>
</div>  

另外，如果你能告诉我为什么会发生这种情况，我会得到答案，因为我仍然处于学习阶段，所以我将不胜感激。

谢谢。 :)

没有调整大小看起来很正常

看看它如何在调整大小时溢出

Answer 1

我添加了一些背景颜色，因此您可以轻松查看每个容器的块。 徽标将为red ，导航栏标题为yellow ，导航栏折叠为green 。

navbar-brand有一个float: left所以它会浮动到块的左边，如果你在navbar-header之后有它（它有display:block所以它将占据屏幕的整个宽度）阻塞它只会向左浮动在下面，您可以在navbar-header内移动它或将其移到容器流体之外。

 .navbar-brand { background: red; float: right; display: block; } .navbar-header { background: yellow; } .navbar-collapse { background: green; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <!-- Navigation Bar --> <div class="navbar navbar-default" id="navbar-outer"> <div class="container-fluid" style="margin:0px;"> <div class="navbar-header"> <a class="navbar-brand" href="#"> <img src="../images/LOL_LOGO_NEW-01.png" /> </a> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu"> <span class=" glyphicon glyphicon-menu-hamburger"></span> </button> </div> <div class="collapse navbar-collapse" id="menu"> <ul class="navbar navbar-nav" id="navbar-menu"> <li><a href="#">WHAT WE DO</a></li> <li><a href="#">WHO WE ARE</a></li> <li><a href="#">OUR WORK</a></li> <li><a href="#">VENTURES</a></li> <li><a href="#">BLOG</a></li> <li><a href="#">CONNECT</a></li> </ul> </div> </div>