Bootstrap Image Resize

Question

好的，所以我用Bootstrap創建了一個網站，並且遇到了問題。我在徽標的導航欄中放置了一個圖像，然後我調整瀏覽器大小以強制移動佈局。當我到達圖像應該開始調整大小的位置時，它會在重新調整大小之前下降到（或高於）菜單切換。

我甚至嘗試添加.img-responsive但它沒有幫助。

這裏是我談論的圖像：

這裏是我的代碼：

<div class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#"><img src="http://lorempixel.com/300/40/" class="img-responsive" alt="LOGO"></a> 
    </div> 
    <div class="collapse navbar-collapse"> 
     <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">Home</a></li> 
     <li><a href="#about">About</a></li> 
     <li><a href="#contact">Contact</a></li> 
     </ul> 
    </div><!--/.nav-collapse --> 
    </div> 
</div> 

<div class="container"> 

    <div class="text-center"> 
    <h1>Bootstrap starter template</h1> 
    <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p> 
    </div> 

</div><!-- /.container --> 

任何幫助，將不勝感激 感謝。

Answer 1

有幾種方法可以解決這個問題。您可以使用媒體查詢將max-width或百分比width設置爲.navbar-brand。

最明智的解決方案可能是使用CSS3 calc使其佔用100％寬度減去菜單按鈕所佔空間（22px寬度+ 20px填充+ 2px邊框+ 15px margin = 59px總空間）。而且因爲你的形象在390px屏幕寬度按下時，您的媒體查詢應該是：

@media (max-width: 390px) { 
    .navbar-brand { 
     width: calc(100% - 59px); 
    } 
} 

檢查JSFiddle with the result。我的other answer也可以幫助你。