在移動設備或桌面上更改列類

Question

我有一個包含兩列的簡單行

<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>

有沒有一種方法可以用來像這樣切換類？ 我正在使用 thymeleaf 和 spring boot 作為后端，bootstrap 5 作為前端。

Answer 1

您可以使用以下方法為不同的屏幕尺寸應用不同的類

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

您可以根據屏幕尺寸要求更換斷點

請參考此鏈接中的斷點https://getbootstrap.com/docs/5.2/layout/grid/#grid-options

Answer 2

正如Kuladeep Surebathina在評論中提到的那樣，您可以使用Bootstrap breakpoints 。

[...] 600px 及以下的媒體查詢類

根據Customize Bootstrap 4's grid-system Breakpoints accepted answer，您可以自定義提供的斷點。