Bootstrap 在移动的或桌面上更改列类

hxzsmxv2 于 2022-12-07 发布在 Bootstrap

关注(0)|答案(2)|浏览(181)

我有一个包含两列的简单行

<div class="row">
<div class="col-9">
hello
</div>
<div class="col-3">
world
</div>
</div>

然而，由于小屏幕，我想改变列类，如果在移动的，所以我的类将是

<div class="row">
<div class="col-8">
hello
</div>
<div class="col-4">
world
</div>
</div>

有什么方法可以像这样切换类吗？2我用的是thymeleaf，后端用的是spring Boot ，前端用的是bootstrap 5。

2条答案

您可以使用以下方法为不同的屏幕大小应用不同的类

<div class="row">
<div class="col-lg-9 col-8">
hello
</div>
<div class="col-lg-3 col-4">
world
</div>
</div>

您可以根据屏幕大小要求替换断点
请参阅此链接www.example.com中的断点https://getbootstrap.com/docs/5.2/layout/grid/#grid-options

如Kuladeep Surebathina所述或注解中的ths，您可以使用Bootstrap断点。
[...]600px及以下的媒体查询类
根据Customize Bootstrap 4's grid-system Breakpoints接受的答案，可以自定义所提供的断点。