防止在品牌徽標頂部切換導航欄圖標堆疊

在品牌徽標上使用具有img響應類的圖像時，如何防止顯示導航欄在標誌圖像頂部堆疊時崩潰的切換圖標？我想要的是當瀏覽器窗口縮小時，徽標可以縮小。防止在品牌徽標頂部切換導航欄圖標堆疊

看到這裏我的問題的一個簡單的例子： http://www.bootply.com/UP2MFV011K#

我的標誌是398x120像素，它需要有navheader的高度，以允許它的大小。然後，當瀏覽器窗口縮小時，縮小徽標圖像，但不允許切換導航圖標堆疊在頂部。目前，在徽標開始縮小之前，切換圖標最終會堆疊在頂部。

2016-02-12 user5919866

默認情況下，自舉圖像的最小寬度爲100％，這意味着一旦瀏覽器窗口足夠小以爲100％寬度騰出空間，它將移動瀏覽器。可能最簡單的解決方案是將手機尺寸屏幕上的.navbar品牌寬度降低至80％。並且加入height:auto;會給你你想要的響應高度。

.navbar-brand{ 
    width:80%; 
    height:auto; 
}

查看我的解決方案。

http://codepen.io/egerrard/pen/OMdWGy

來源

2016-02-12 18:56:07

是啊，那工作還算不錯，但一旦你達到311像素寬，然後將圖像跳下來。當然，在那個小窗口可能不用擔心，但看到圖像繼續向下縮放並且不會跳到低於切換導航欄的位置上仍然很好。另外，如何讓navbar-header的高度與圖片的高度相匹配，這樣圖片就不會重疊，然後兩者都會響應地縮小。 – user5919866

如果您在按鈕周圍添加一個容器，則可以添加一些樣式以強制其在剩餘的20％寬度內。另外，添加'.navbar-brand {height：auto;}'會讓你找到你想要的高度。看到我的codepen鏈接上面看到它的行動。如果你需要將導航鏈接對齊，你必須做一些額外的CSS，但這至少可以回答你的問題。 –

防止在品牌徽標頂部切換導航欄圖標堆疊

回答

相關問題