如何在bootstrap中根据大设备的分辨率范围为div分配不同的列数

Question

​

我刚接触html，css，bootstrap。有没有什么办法我们可以根据大型设备的分辨率范围将不同数量的列分配给div？

lg (对于笔记本电脑和台式机-屏幕宽度等于或大于1200px )

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

请看下图。这就是Ui应该是什么样子。在左侧将有一个具有四列的表单-第一列和第三列包含标签，第二列和第四列包含输入列，这些列中的每一列都被分配给controls.So -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)，因为许多计算机屏幕超过了这个大小。

编辑如果您将内联表单添加到表单中，并将标签+输入放在表单组内，则无论大小如何，都应该将它们放在具有适当间距的同一行上。