如何在桌面视图中设置4列响应

Question

我已经使用bootstrap在桌面视图中添加了4列，但是我不知道如何在响应视图中设置这4列。

Answer 1

Bootstrap有各种屏幕大小相关的类。你可以试试

桌面4,Ipad/tab 2，移动视图1。

<div class="row">
<div class="col-lg-3 col-md-6 col-xs-12">info here</div> 
<div class="col-lg-3 col-md-6 col-xs-12">info here</div> 
<div class="col-lg-3 col-md-6 col-xs-12">info here</div> 
<div class="col-lg-3 col-md-6 col-xs-12">info here</div>
</div>

Answer 2

试一试:

<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>

Answer 3

首先，您需要阅读Bootstrap的官方文档。所以你可以很容易地学习&使用预定义的classes引导。

有用链接:
https://getbootstrap.com/docs/5.1/layout/grid/它是如何工作的https://getbootstrap.com/docs/5.1/layout/grid/#row-columnshttps://getbootstrap.com/docs/5.1/layout/gutters/水平——vertical-gutters

.l {
box-shadow: 0 0 0 1px #ccc;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<h5 class="mt-4 text-primary">With Columns Break</h5> 
<div class="container py-3">
<div class="row row-cols-1 rows-cols-sm-2 row-cols-md-4 g-4">
<div class="col l">1</div>
<div class="col l">2</div>
<div class="col l">3</div>
<div class="col l">4</div>
</div>
</div>
<h5 class="mt-4 text-primary">Without Columns Break</h5> 
<div class="container py-3">
<div class="row g-4">
<div class="col l">1</div>
<div class="col l">2</div>
<div class="col l">3</div>
<div class="col l">4</div>
</div>
</div>