54

这可能是一个愚蠢的问题，但我敢肯定我不是唯一一个想知道的人。

我知道对齐类： <p class="text-center">Text Centered within the block element</p> <p class="text-right">Text aligned to the right within the block element</p> <p class="text-left">Text aligned to the left within the block element</p>

Twitters Bootstrap 框架中是否有一组类可以证明文本的合理性？

例如<p class="text-justify">Sample Text Goes Here</p>

为什么 bootstrap 似乎没有包含实用功能，例如text-align: justify？

4

4 回答 4

81

在Bootstrap 3和Bootstrap 4中，您可以使用以下内容：

<p class="text-justify">Justified text.</p>

官方文档

（更新）此功能已从Bootstrap 5中删除

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

基于官方 UX 建议：不要使用两端对齐的文本！;)

于 2014-02-08T16:25:58.657 回答
60

不，但是您可以在bootstrap.css上添加一个新类

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

更新

以前版本的引导程序不支持text-justify. 但是 bootstrap 3 增加了一个类text-justify。

于 2013-10-02T20:05:28.780 回答
3

您可以添加到您的main.css、custom.css或您制作的任何*.css文件，或直接添加到文件顶部bootstrap.css：

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

如果您直接将其添加到bootstrap.css文件中，从 v3.0.0 开始，它将从此开始：

/*!
 * Bootstrap v3.0.0
 *
 * Copyright 2013 Twitter, Inc
 * Licensed under the Apache License v2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Designed and built with all the love in the world by @mdo and @fat.
 */

/*! normalize.css v2.1.0 | MIT License | git.io/normalize */

article,
aside,
details,
...
...
…

至

/*!
 * Bootstrap v3.0.0
 *
 * Copyright 2013 Twitter, Inc
 * Licensed under the Apache License v2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Designed and built with all the love in the world by @mdo and @fat.
 */

/*! normalize.css v2.1.0 | MIT License | git.io/normalize */

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

article,
aside,
details,
...
...
…
于 2013-12-13T18:59:58.030 回答
0

Bootstrap 中有一个可用的类。

class = 'text-justify'

您可以查看Bootstrap 文档中的文本对齐方式。

于 2021-02-14T12:43:25.593 回答