我正在使用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列。
它说col-lg-的最小宽度设置为992px,不应该是1200px,正如文档所说的那样?难道我做错了什么?
我希望这会帮助你。使用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>