为什么Bootstrap会修改HTML布局？如何恢复原有自定义样式？

故障原因 #

Bootstrap 5 中默认给.row类设置了display: flex属性，你原来基于普通块级父元素+text-align: right实现的右对齐水平排列逻辑，对flex容器不生效，所以布局会错乱。

可选修复方案 #

方案1：修改外层容器类名（最推荐，无样式冲突风险） #

不要和Bootstrap的内置类名重名，把外层div的row类替换为自定义类名即可：

<!-- HTML修改 -->
<div class="text-right-row">
  <div class="block">Lorem</div>
  <div class="block">Ipsum</div>
  <div class="block">Dolor</div>
</div>

/* 对应CSS修改 */
.block { display: inline-block; }
.text-right-row {
  width: 100%;
  text-align: right;
}

方案2：保留row类，补充flex对齐规则 #

如果你需要继续使用Bootstrap row的原有功能，补充flex布局的对齐规则即可：

.row {
  width: 100%;
  justify-content: flex-end; /* 给flex容器设置右对齐，替代原来的text-align */
}

方案3：直接使用Bootstrap内置工具类，无需额外自定义CSS #

给元素加Bootstrap自带的工具类就能实现效果：

<div class="row justify-content-end">
  <div class="d-inline-block">Lorem</div>
  <div class="d-inline-block">Ipsum</div>
  <div class="d-inline-block">Dolor</div>
</div>

故障原因 #

CSS优先级相同时，后加载的样式会覆盖先加载的样式，通常是因为你把自定义CSS放在了Bootstrap CSS之前引入，或者选择器优先级不够导致样式不生效。

修复步骤 #

1. 先调整CSS引入顺序，把你的自定义CSS的<link>标签放在Bootstrap CSS的<link>标签之后，同等优先级下后定义的样式会自动覆盖Bootstrap的默认样式。
2. 如果调整顺序后仍不生效，提升自定义hr样式的选择器优先级即可，比如增加父级前缀：

/* 选择器优先级高于Bootstrap的默认hr选择器，样式会优先生效 */
body hr {
  border-top: 1px dotted red;
  border-bottom: 0;
  /* 按需覆盖Bootstrap的默认属性即可，比如margin、opacity等 */
  margin: 1rem 0;
  opacity: 1;
}

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