Bootstrap 如何使用媒体查询减少html或正文宽度

nnsrf1az 于 2022-12-07 发布在 Bootstrap

关注(0)|答案(2)|浏览(116)

我只是想稍微减少桌面视图宽度，但无法让它与媒体查询一起工作。我最近的尝试是

@media (min-width: 992px) and (max-width: 1199.98px) {

   html, body {
        max-width: 80%;
   }
}

但它没有任何影响。我不认为我想搞乱容器b/c，这将遗漏导航栏。使用我自己的样式表（添加在bootstrap cdn的东西下面），而不是直接使用template.html中的媒体查询，但我不知道这是否有任何区别。我试图这样做的方式是正确的还是我完全错过了什么？

twitter-bootstrap

来源：https://stackoverflow.com/questions/59848683/how-to-reduce-html-or-body-width-with-media-queries

2条答案

按热度按时间

js81xvg61#

在使用布局库时，您不希望在高级元素上乱敲。这限制了您和其他人稍后在页面中可以做的事情（比如您希望在某个地方有一个全角横幅）。您可能也不希望随意覆盖Bootstrap类的 all 示例。
在本例中，请看向.container或.container-fluid元素添加一个自定义类，限制其宽度：

.container.narrow {
    max-width: 80%;
}

对于任何需要较窄宽度的容器，都可以使用该类;对于较宽的内容，则可以使用 * 不 * 该类的容器。

<div class="container narrow"> ... </div>

在媒体查询中是否应用此方法可能并不重要。

赞(0）回复(0）举报 2022-12-07

3npbholx2#

我正在努力寻找答案，我的屏幕不能正常工作的移动的和下面的答案从你的工作就像一个魅力。非常感谢你的答案。我删除了元名称行，它的工作就像一个魅力。
莫汉
@Beanic我想你已经为那个（）添加了viewport标签-
2020年1月22日12：50

赞(0）回复(0）举报 2022-12-07

我来回答

Bootstrap 如何使用媒体查询减少html或正文宽度

2条答案

相关问题

热门标签

最新问答