html - 引导网格的媒体查询

Question

我不是造型专家，我在小型项目中使用引导程序。所以，我的问题是网格系统。我有两台显示器，第一台分辨率为 1920x1080，第二台分辨率为 1366x768。如果分辨率是 1366x768，我想用 mediaquery 说使用 md 的网格系统而不是 lg

例如，我有一个 div，如下所示

<div class="col-lg-9 col-md-6">
....
</div>

div class="col-lg-3 col-md-6">
...
</div>

可能吗？

标签： htmlcsstwitter-bootstraptwitter-bootstrap-3

Answer 1

在 bootstrap3 中，您可以为等于或大于 1200 像素的设备使用 col-lg 类，为等于或大于 992 像素的设备使用 col-md 类。同样，在 bootstrap 4 中，您可以使用 col-lg 类来获得等于 992 像素或更高的分辨率，而 col-md 类用于 col-md 或更高的分辨率。您可以在其官方网站https://getbootstrap.com/docs/3.3/css/#overview-container上找到完整的引导网格文档（对于引导程序 3）。

在您的情况下，我正在使用 boostrap 版本 3。如果您想在 1366X768 或更高的分辨率上使用 col-md 类，显然您想在 1920x1080 或更高的分辨率上使用 col-lg 类，正如您所说的那样，您有两台显示器。如果是这样，只需转到 bootstrap 官方网站的自定义部分，即https://getbootstrap.com/docs/3.3/customize/然后向下滚动您将找到媒体查询断点部分。您可以从那里自定义您自己的断点，只需将@screen-lg 标记的输入框填充为 1920 像素，@screen-md 标记为 1366 像素。现在您可以转到此页面的底部，然后只需单击编译和下载按钮。现在您可以使用这个下载的可能适合您的引导文件。同样，您可以通过编辑这些较少的变量来自定义您想要自定义的每一件事。