我应该在引导程序中使用什么来代替“文本对齐”？

Question

大家知道 bootstrap 5 删除了“text-justify”类，现在我不知道我应该使用什么来代替 bootstrap 中的 text-justify。

我不知道他们为什么放弃#29679。（“text-justify”类）

Answer 1

在 Bootstrap 5 文档中，他们添加了一条注释：-

---

请注意，我们不提供用于对齐文本的实用程序类。尽管 从美学上来说，合理的文本可能看起来更有吸引力，它确实使 字间距更加随机，因此更难阅读。

我没有找到任何内置类，此外，您可以从这里检查https://getbootstrap.com/docs/5.0/utilities/text/

因此，您可以使用自定义类

.custom-class { text-align: justify }

。

谢谢。

Answer 2

在 Bootstrap 5 中，

text-alignment

类是 Bootstrap 实用程序的一部分，可以使用 Utilities API 进行扩展。

默认情况下，Bootstrap 5 生成以下类：

text-start

、

text-center

、

text-end

（它们的响应式类也可用）。

我们可以通过向

text-justify

实用程序添加附加值来生成

text-align

类：

$utilities: map-merge(
  $utilities,
  (
    "text-align": map-merge(
      map-get($utilities, "text-align"),
      (
        values: map-merge(
          map-get(map-get($utilities, "text-align"), "values"),
          (justify: justify),
        ),
      ),
    ),
  )
);

CSS 输出：

.text-justify {
  text-align: justify !important;
}

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

// .text-md-justify ...
// .text-lg-justify ...

@media (min-width: 1200px) {
  .text-xl-justify {
    text-align: justify !important;
  }
}

完整的SCSS代码：

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";

// extend `text-align` utility
$utilities: map-merge(
  $utilities,
  (
    "text-align": map-merge(
      map-get($utilities, "text-align"),
      (
        values: map-merge(
          map-get(map-get($utilities, "text-align"), "values"),
          (justify: justify),
        ),
      ),
    ),
  )
);

// include utilities API last to generate classes based on the Sass map in `_utilities.scss`
@import "bootstrap/scss/utilities/api";

更多资源：

https://getbootstrap.com/docs/5.0/utilities/api/#using-the-api https://getbootstrap.com/docs/5.0/utilities/api/#modify-utilities