Wie kann vermieden werden, dass das Logo die Position bei der Größenanpassung des Fensters ändert?

Question

Ich arbeite an Bootstrap navbar und nach der Größenanpassung, wie das Hamburger-Menü zeigt das Logo verschiebt seine Position und sogar überläuft die navbar. Wie kann ich das Logo ansprechen, so dass es seine Größe oder Position ändert, wenn die navbar Größe im Fenster geändert wird?

 <!-- 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> 

Auch zusammen mit der Antwort, wenn Sie mich mit dem Grunde, warum es passiert ist, dann wird es als ich noch in der Lernphase bin geschätzt werden bieten könnten.

Danke. :)

without resizing it looks normal

look how it overflows on resize

Answer 1

Ich habe einige Hintergrundfarbe, so dass Sie leicht den Block für jeden Behälter sehen. Das Logo wird red sein, der Navbar-Header wird yellow sein, und der Navbar-Kollaps wird green sein.

navbar-brand hat ein float: left, so dass es auf der linken Seite des Blocks schweben, wenn Sie es haben nach navbar-header (welches display:block so wird es die ganze Breite des Bildschirms nehmen) blockiert wird es nur links unten schweben, können Sie Verschieben Sie es innerhalb navbar-header oder verschieben Sie es außerhalb der Container-Flüssigkeit.

.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>