Bootstrap 5中text-end类为什么不生效？无法实现文本右对齐

• 类库版本不匹配/未加载
  text-end 是Bootstrap 5才开始内置的工具类：
  • 如果项目完全没引入Bootstrap的CSS文件，这个类名只是个空字符串，没有任何绑定的样式规则，自然不会产生效果
  • 如果引入的是Bootstrap 4及更早的版本，内置的文本右对齐类是text-right，根本不存在text-end这个类，加了也没有任何作用
• 样式被高优先级规则覆盖
  就算正确引入了对应版本的Bootstrap，如果项目里写的自定义样式，给这个div或者内部的p标签加了带!important的text-align: left规则，样式优先级会压过Bootstrap的工具类，直接把右对齐效果冲掉。
• 元素宽度不足导致视觉失效
  很多新手以为加了col-12类就会自动占满父容器宽度，如果Bootstrap的栅格系统样式没加载全，col-12本身没有宽度规则，整个div的宽度会收缩到和里面的文本一样宽——这种情况就算文本对齐规则真的生效了，因为没有多余的横向空间，根本看不出右对齐的视觉差异。

• 按F12打开浏览器开发者工具，选中带text-end的那个div元素
• 先看元素的计算样式面板里text-align的实际取值：如果值不是right，顺着样式栈往上翻，找到优先级更高的覆盖规则调整即可
• 如果计算样式里text-align已经是right但视觉上没变化，就看元素本身的宽度：如果宽度刚好和内部p标签的宽度一致，就是宽度不够的问题，给这个div补个100%宽度的样式，就能看到右对齐的效果了

顺带提个和对齐无关的小问题：你写的电话链接协议名teL是拼写错误，正确写法是全小写的tel，不然点击链接的时候没法正常唤起系统拨号功能。

内容的提问来源于stack exchange，提问作者mikmik