製作導航菜單響應

這是我大學畢業後第一次做任何CSS。我已成功地寫筆：製作導航菜單響應

Navigation with hover effect

但如果調整瀏覽器，一切都被弄亂了。到目前爲止，我只是使用bootstrap來製作網站原型。但現在我正在嘗試自己學習一些設計。

我應該如何繼續解決這樣的問題。

下面是代碼：pen

來源

2014-01-29 Deepankar Bajpeyi

你必須使用CSS媒體查詢，看看我的一個響應式導航項目[這裏]（http://jsfiddle.net/mdesdev/Wqq6g/），你可以學到一些東西;） – mdesdev

不客氣; ） – mdesdev

要解決該問題，即它打破了，你需要添加到您的類

.bmenu li { 
    border-right: 1px solid rgba(20, 0, 0, 0.4); 
    clear: both; 
    display: inline-block;//This will stop your nav from overflowing over eachother 
    font-size: 20px; 
    font-weight: bold; 
    height: 20px; 
    padding: 20px; 
}

我仍然會使用媒體查詢，只是調整每個大小。你可能在某個時候需要堆疊。轉到CSS-tricks.com，看看在調整瀏覽器大小時Chris如何做他的導航。希望這可以幫助。

來源

2014-01-29 17:23:58 Cam

它確實沒有人。非常感謝該片段。我現在可以從這裏開始。 :) –

沒問題。克里斯Coyier有大量有用的媒體查詢教程，可以幫助噸。如果您有任何問題，請告訴我！ – Cam

當然。我會 –

這裏典型的最好的做法是要知道你的工具箱。你不會被迫通過包含它來利用所有的引導程序。但是，只需簡單地製作一個styles.css文件，然後使用導航欄或導航欄固定或任何您想要的類，然後將自己的CSS放入styles.css中即可獲得最好的兩個單詞，從而可以合理簡單地覆蓋默認樣式。

來源

2014-01-29 17:15:40 yburyug

你應該做一些關於media queries的研究，它可以讓你調整你的風格，適合每種屏幕尺寸。之後，您可以在屏幕調整大小時設置不同的填充或邊距（例如）。

來源

2014-01-29 17:19:58 Ka0ru

製作導航菜單響應

回答

相關問題