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">

如果你想要它是静态的并且总是全宽。但这会使它无法响应。但是，您对媒体查询所做的工作应该起作用，而不会影响桌面样式。

用于居中元素的

编辑检查此讨论here它有一些很好的答案