在bootstrap中，justify-content-sm-center没有按预期工作

Question

在bootstrap 5中，justify-content-sm-center没有按预期工作。我想在较小的屏幕上(比如低于578px)使一个特定的div居中，我将这个应用于那个特定的分割。但这行不通。当我将屏幕尺寸扩展到576px以上时，它开始工作了。在bootstrap css中，媒体查询是这样的

@media (min-width: 576px)
.justify-content-sm-center {
justify-content: center !important;
}

所以它只能在576px范围内工作。分辨率是多少?

在bootstrap 5中，justify-content-sm-center没有按预期工作。

Answer 1

Bootstrap被认为是移动优先的，所以如果我们参考可用的断点，如果你需要你的元素在576px以下居中，你需要使用.justify-content-center。在576px之后，使用sm类可以指定另一种行为。

换句话说，你可以这样做，让你的内容在<=576px时居中，然后在>576px时左对齐(LTR)。

<div class="w-100 d-flex justify-content-center justify-content-sm-start">
Flex item
</div>