bootstrap上的屏幕大小列似乎没有正确应用

问题描述 投票:-1回答:1

我正在使用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的设备:enter image description here

但是当我运行网站时,使用Chrome来模拟各种分辨率,在1024px中我仍然有4列,只有在设置991px时我才能获得2列。

使用Chrome开发人员工具,我看到了:enter image description here

它说col-lg-的最小宽度设置为992px,不应该是1200px,正如文档所说的那样?难道我做错了什么?

css bootstrap-4 css-grid
1个回答
2
投票

我希望这会帮助你。使用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>
© www.soinside.com 2019 - 2024. All rights reserved.