响应间隔(即mb-lg-2mb-sm-3等)在Bootstrap 5中不起作用

Question

在bootstrap 4中，这些类运行良好。但它们在Bootstrap 5中不起作用。知道为什么吗？

注意：d-block d-lg-flex、text center text lg start text md end这些都可以正常工作。看起来只有边距和填充相关的类不起作用。

样本代码：

<div class="d-block d-lg-flex justify-content-center flex-row bd-highlight ">
<div class="mb-0 mb-md-3 mb-lg-0">
<div class="dropdown text-center cairo ">
<select x-model="selectedUnits" class="form-select feature_text" aria-label="Default select example">
<option selected="" disabled="">Select unit amount</option>
<option value="myval">1 unit</option>
<option value="myval">1 unit</option>
<option value="myval">1 unit</option>
</select>
</div>
</div>
</div>

Answer 1

裕度类mb-0 mb-md-3 mb-lg-0在Bootstrap 4和Bootstrap 5中都应按预期工作。

Bootstrap 5 中的响应边际底部工作

但是，在引导程序5 中，text-lg-left text-md-right已更改为text-lg-start text-md-end

Answer 2

2021在bootstrap 5边距和填充：

利润

• 利润利润顶部：mt值
• 保证金权利：me值
• 边距底部：mb值
• 左边距：ms值

填充

• 填充顶部：pt值
• 右侧填充：pe值
• 垫底：pb值
• Paddig left：ps值

该值的范围为0到5(例如：-pt-1用于填充顶部(

Answer 3

只需在此处添加答案，边距类mb-0 mb-md-3 mb-lg-0即可正常工作。

对于xs，我们需要像{property}{sides}-{size}一样给出裕度和填充，因为{property}{sides}-{breakpoint}-{size}适用于sm, md, lg, xl和xxl。

如前所述