Bootstrap全寬導航欄和“ @media”

Question

我正在使用Bootstrap構建站點，但無法獲得導航欄來覆蓋頁面的整個寬度，因為Bootstrap的默認樣式會強制在頁面的每一側進行填充。

我通過添加以下CSS來解決此問題，但這創建了一個新問題。

@media (max-width: 767px) {
  body {
    padding-right: 0px;
    padding-left: 0px;
  }

新的問題是，這將導致忽略桌面大小樣式，因此僅當瀏覽器窗口為手機大小時，它才看起來正確。

我認為解決此問題的唯一方法可能是了解@media的作用以及它的工作方式。 或者，也許有更好的方法來制作不需要修改@media的全寬導航欄？

我見過具有全寬度導航欄的Bootstrap站點，但還無法弄清Bootstrap代碼的哪一部分已更改以實現此目的。 修改@media是我唯一能弄清楚的方法。

任何幫助將不勝感激。

Answer 1

您可以將第一個div更改為

<div class="navbar navbar-static-top">

如果您希望它是靜態的並且始終保持全寬。 但這將使其不響應。 但是，您對媒體查詢所做的操作應該起作用，並且不會影響桌面樣式。

編輯以元素為中心檢查此討論， 這里有一些不錯的答案