1

我正在使用 Bootstrap 构建一个站点，但无法让导航栏跨越页面的整个宽度，因为 Bootstrap 的默认样式强制在页面的每一侧进行填充。

我通过添加以下 CSS 解决了这个问题，但这产生了一个新问题。

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

新问题是这会导致桌面大小样式被忽略，因此只有当浏览器窗口为手机大小时，它才会最终看起来正确。

我认为解决这个问题的唯一方法可能是了解@media 的用途以及它是如何工作的。或者也许有更好的方法来制作不需要修改@media 的全宽导航栏？

我见过带有全宽导航栏的 Bootstrap 站点，但无法弄清楚 Bootstrap 代码的哪一部分被更改来完成此操作。修改@media 是我能弄清楚的唯一方法。

任何帮助将不胜感激。

4

1 回答 1

0

您可以将第一个 div 更改为

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

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

编辑以使元素居中检查此讨论here它有一些很好的答案

于 2013-06-12T06:43:15.230 回答