这可能是一个愚蠢的问题,但我确信我不是唯一一个想知道的人。
我知道对齐类:<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
之类的实用程序功能?
5条答案
按热度按时间mlmc2os51#
在Bootstrap 3和Bootstrap 4中,可以使用:
Official documentation
(更新)此功能已从Bootstrap 5中删除
请注意,我们没有为对齐的文本提供实用程序类。虽然从美学上讲,对齐的文本可能看起来更吸引人,但它确实使单词间距更加随机,因此更难阅读。
基于官方UX建议:不要使用对齐文本!;)
txu3uszq2#
不能。但是你可以在bootstrap.css上添加一个新类
更新
以前版本的bootstrap不支持
text-justify
。但是bootstrap 3添加了一个类text-justify
。sr4lhrrt3#
您可以添加到您的**
main.css
、custom.css
或您创建的*.css
文件中,也可以直接添加到bootstrap.css
**文件的顶部:如果你直接将它添加到**
bootstrap.css
**文件中,从v3.0.0开始,它会变成这样:到
vnzz0bqm4#
在Bootstrap中有一个类可用于此。
您可以在Bootstrap documentation中查看文本对齐。
axr492tv5#
在Bootstrap 5中没有内置的类,但我们可以使用**Bootstrap Utility API**扩展现有的
text-align
实用程序并生成text-justify
类。默认情况下,Bootstrap 5会生成以下文本对齐类:
text-start
、text-center
、text-end
(及其响应版本)。我们可以通过向
text-align
实用程序添加一个附加值来生成text-justify
类:完整SCSS代码:
DEMO:https://stackblitz.com/edit/bootstrap-5-qjdfsx?file=src%2Fstyles.scss
CSS输出: