如何根据大型设备的分辨率范围为引导程序中的div分配不同数量的列

Question

我是html，css，bootstrap的新手。 无论如何，我们可以根据大型设备的分辨率范围为div分配不同数量的列吗？

lg（适用于笔记本电脑和台式机 - 屏幕等于或大于1200px宽）

但是我可以为1200-1300px和1300px-1400px之间的宽度分配不同数量的列吗？

请查看下图。这就是Ui应该是这样的。在左侧，将有一个包含四列的表单 - 第一列和第三列包含标签，第二列和第四列包含输入控件。因此，每列都分配了col-lg-3。 现在的问题是，当宽度大约为1250px时，左侧表格看起来很好（但它需要6列）但在这种情况下，网格无法看到没有水平滚动条的所有列。

但是如果分辨率大约为1400px，那么标签和控件之间的距离太大，左手边的控件周围也有很多空的空间。所以我一直在寻找一种解决方案，我可以根据分辨率分配列数

Answer 1

您可以使用Bootstrap v4来实现它。

了解更多信息： https://getbootstrap.com/docs/4.0/layout/grid/

Answer 2

您可以创建媒体查询以影响不同屏幕宽度的当前列。或者，您可以创建一组新的类，例如.col-xxl-2，并为它们提供不同的百分比宽度，例如20％，并将它们放在针对您想要的大小的媒体查询中。那么div可以有<div class="col-xs-12 col-sm-8 col-md-6 col-lg-4 col-xxl-2"></div>等等。我不知道这是否真的有必要，将它限制在100px差异（1300-1400），因为很多电脑屏幕都超出了这个尺寸。

修改 如果你在表单中添加form-inline并将你的标签+输入包装在一个表单组中，那么无论大小如何，它都应该以适当的间距将它们放在同一行上。