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

如果您希望它是静态的并且始终是全宽的。但这会使它没有响应。但是，您对媒体查询所做的操作应该有效，并且不会影响桌面样式。

EDIT 以让元素居中查看此讨论 here它有一些很好的答案