導航欄折疊菜單與實際導航欄的寬度不同。 我該如何解決？ 導航欄也不會出現在較小的窗口中

Question

我正在嘗試制作一個粘性導航欄，它可以在較小的窗口（智能手機）中折疊。 第一個問題是它看起來像這樣（包括圖片）並且與實際導航欄的寬度不同。 第二個問題是導航欄不會在較小的窗口中淡入。 我對此相當陌生，因此歡迎提出任何建議。

編輯：我添加了一個代碼筆

代碼筆

圖片

在此處輸入圖片說明

這是我在項目中包含的內容

enter code here

Answer 1

如果我檢查您的頁面，我可以看到您的面板位於#navbar並且此元素的兩側有1rem填充。 因此，當您放置100%寬度時，它是父級的寬度，即內邊距。 您需要做的是不要在大容器本身上填充填充物。 相反，您將此填充單獨放置在帶有按鈕的頂部欄和面板上。

您可能需要創建另一個容器來解決您的問題。 盡管您使用的是 Bootstrap（我不熟悉）。 刪除填充可能並不那么容易，但我只能說這就是為什么您的導航面板在移動設備上不是全寬的原因。

我知道制作這種在桌面和移動設備上都能很好地使用面板的導航欄並不容易實現。 祝你好運。