引导程序上的屏幕尺寸列似乎无法正确应用

Question

我正在使用Bootstrap 4 + Asp.Net MVC创建一个页面。我想在大屏幕上创建4列布局，在中型设备上创建2列。所以我创建了这个：

<div class="form-row">
    <div class="form-group col-lg-3 col-md-6"></div>
    <div class="form-group col-lg-3 col-md-6"></div>
    <div class="form-group col-lg-3 col-md-6"></div>
    <div class="form-group col-lg-3 col-md-6"></div>
</div>

bootstrap 4文档说col-lg- *将应用于大于1200px的设备，而col-md- *将应用于大于992px的设备：

但是当我运行网站时，使用Chrome浏览器模拟各种分辨率， 在1024px中，我仍然有4列，只有设置991px时，我才有2列。

使用Chrome开发人员工具，我看到了以下内容：

它说col-lg-的最小宽度设置为992px，不是像文档所说的那样为1200px吗？我做错什么了吗？

Answer 1

我希望这会对您有所帮助。使用class row而不是form-row，如果bootstrap是4+，那么您也可以使用xl class

<div class="row">
    <div class="form-group col-xl-3 col-lg-3 col-md-6"></div>
    <div class="form-group col-xl-3 col-lg-3 col-md-6"></div>
    <div class="form-group col-xl-3 col-lg-3 col-md-6"></div>
    <div class="form-group col-xl-3 col-lg-3 col-md-6"></div>
</div>