Boostrap 5.3 不同分辨率列不起作用

Question

我想要 4 个 div，它必须以不同的分辨率更改，但它不起作用。

我想要

当分辨率为
```
≥992px
```
时，div在同一行（3列）
当分辨率为
```
≥768px
```
时，div 分为 2 行，第一行有 3 个第一个 div，有 4 列，第二个 div 有 12 列
当分辨率较低时，div 必须为 2 行，第一行和第二行有 6 列，第三行和第四行相同..

但是最后一个决议不起作用，

<768

。我只看到分辨率 col-lg 和 col-md... 但如果我删除分辨率

col-md

，那么分辨率 col-6 就可以了！我不知道答案

col-6 doesn't work col-md-4 col-md-4 col-md-4 col-md-12

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

<body class="container-fluid">
<div class="row">
    <div class="col-6 col-sm-6 col-md-4 col-lg-3 bg-danger">Div1 respon</div>
    <div class="col-6 col-sm-6 col-md-4 col-lg-3 bg-primary">Div2 respon</div>
    <div class="col-6 col-sm-6 col-md-4 col-lg-3 bg-success">Div3 respon</div>
    <div class="col-6 col-sm-6 col-md-4 col-lg-3 bg-secondary">Div4 respon</div>
</div>
</body>

Answer 1

你就快到了。您需要使用

col-md-12

作为第四个元素。您可以删除

sm

断点，因为它们是多余的。它们会用相同的值覆盖您的默认值。

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

<body class="container-fluid">
<div class="row">
    <div class="col-6 col-md-4 col-lg-3 bg-danger">Div1 respon</div>
    <div class="col-6 col-md-4 col-lg-3 bg-primary">Div2 respon</div>
    <div class="col-6 col-md-4 col-lg-3 bg-success">Div3 respon</div>
    <div class="col-6 col-md-12 col-lg-3 bg-secondary">Div4 respon</div>
</div>
</body>

Boostrap 5.3 不同分辨率列不起作用

问题描述投票：0回答：1

1个回答

最新问题

Boostrap 5.3 不同分辨率列不起作用

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1