在調整窗口大小時如何避免徽標更改位置？

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>