如何避免在调整窗口大小时改变Logo的位置？

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> 

此外，在回答一起，如果你能提供给我的理由，为什么就那么发生了，因为我仍然在学习阶段，它会受到赞赏。

谢谢。 :)

without resizing it looks normal

look how it overflows on resize

Answer 1

我加了一些背景颜色，所以你可以很容易地看到每个容器块。徽标将为red，导航栏标题将为yellow，并且导航栏折叠将为​​。

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>