Bootstrap 4与Angular中text-right类在列元素上失效求助

嘿，这个问题我之前帮朋友排查过，根源就在你引入Bootstrap文件的选择上！你目前只加了bootstrap-reboot.css和bootstrap-grid.css，但**.text-right这类文本对齐的工具类根本不在这两个文件里**——它们属于Bootstrap的工具类模块，单独打包在bootstrap-utilities.css里，或者包含在完整的bootstrap.css中。

为什么手动内联样式能生效？ #

那是因为内联样式的优先级比类选择器高，但显然这不是我们想要的“用原生Bootstrap类解决问题”的方式。

正确的解决办法： #

• 补充工具类样式文件
  如果你想继续保留精简的网格和重置样式，只需要在angular.json的styles数组里加上bootstrap-utilities.css就行：

  "styles": [
    "node_modules/bootstrap/dist/css/bootstrap-reboot.css",
    "node_modules/bootstrap/dist/css/bootstrap-grid.css",
    "node_modules/bootstrap/dist/css/bootstrap-utilities.css"
  ]
  

• 直接引入完整Bootstrap样式
  要是你不纠结文件大小，直接换成完整的bootstrap.css更省事，它包含了所有Bootstrap的功能模块：

  "styles": [
    "node_modules/bootstrap/dist/css/bootstrap.css"
  ]
  

• 重启开发服务器
  别忘了重启你的Angular项目（执行ng serve），因为Angular不会自动识别样式文件引入的修改，重启后.text-right就能正常让文本右对齐了。

小提示： #

Bootstrap 4还提供了响应式文本对齐类，比如.text-sm-right、.text-md-right，这些也都依赖工具类文件才能生效，配置完后你也可以试试这些功能。

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