个人中心
gpt4 book ai didi

what should i use instead of 'text-justify' in bootstrap?(在Bootstrap中，我应该使用什么而不是‘文本对齐’？)

转载 作者：bug小助手 更新时间：2023-10-28 09:32:38 28 4
gpt4 key购买 nike



guys as we know that bootstrap 5 removed the "text-justify" class now I don't know that what should I use instead of text-justify in bootstrap.

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


And I don't know why they dropped #29679.( "text-justify" class)

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


更多回答
优秀答案推荐

In Bootstrap 5 Documentation they added a note:-

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




Note that we don’t provide utility classes for justified text. While
aesthetically, the justified text might look more appealing, it does make
word-spacing was more random and therefore harder to read.



I don't find any built-in class for this, further, you can check from here https://getbootstrap.com/docs/5.0/utilities/text/

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


Hence, you can use custom class with .custom-class { text-align: justify }.

因此，您可以使用自定义类与.custom-class { text-align：justify }。


Thanks.

谢谢。



In Bootstrap 5, text-alignment classes are part of Bootstrap utilities, which can be extended using Utilities API.

在Bootstrap 5中，文本对齐类是Bootstrap实用程序的一部分，可以使用实用程序API进行扩展。


By default, Bootstrap 5 generates the following classes: text-start, text-center, text-end (their responsive classes are also available).

默认情况下，Bootstrap 5生成以下类：Text-Start、Text-Center、Text-End(也可以使用它们的响应类)。


We can generate the text-justify class by adding an additional value to the text-align utilities:

我们可以通过向文本对齐实用程序添加一个附加值来生成文本对齐类：


$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 Output:

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

Full SCSS code:

完整的SCSS代码：


@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/variables-dark";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/root";
@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";

DEMO:
https://stackblitz.com/edit/bootstrap-5-qjdfsx?file=src%2Fstyles.scss

演示：https://stackblitz.com/edit/bootstrap-5-qjdfsx?file=src%2Fstyles.scss


Further resources:

更多资源：


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

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


更多回答

28 4 0
文章推荐： The current path, accounts//, didn’t match any of these ( for django application)(当前路径ACCOUNTS//与其中任何一个都不匹配(对于Django应用程序))
文章推荐： Google Sheets - Pulling Row Data from Left(Google Sheet-从左侧拉动行数据)
文章推荐： Singularity 3.11.0 installation failing when running ./mconfig(运行时奇点3.11.0安装失败。/mconfig)
文章推荐： MASM. Getting error "Unmatched macro nesting"(MASM.获取错误“不匹配的宏嵌套”)
bug小助手
个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章
滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com