Bootstrap中mr-md-5样式不生效，请求帮忙排查代码中的错误

1. 核心原因：Bootstrap版本与类名规则不匹配 #

mr-md-5是Bootstrap 4及更早版本的右外边距类名，如果你当前项目引入的是Bootstrap 5及以上版本，左右方向的间距类名已经为适配RTL（从右到左）布局做了统一更名：

• 原左间距类ml-* 改为 ms-*（margin start，起始边外边距）
• 原右间距类mr-* 改为 me-*（margin end，结束边外边距）

2. 对应修复方案 #

若你使用Bootstrap 5+版本 #

直接把代码中的mr-md-5替换为me-md-5即可生效，修改后代码如下：

<div class="container">
  <div class="row">
    <div class="col-sm-3 me-md-5 bg-success">Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam, dicta corporis iusto ea reiciendis suscipit alias odit adipisci esse beatae at tempore ullam accusantium atque recusandae molestias voluptatem obcaecati modi.</div>
   <div class="col-sm-4 mt-md-4 bg-warning">Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo, at.</div>
  </div>
</div>

若你需要使用Bootstrap 4版本的mr-md-5 #

检查页面引入的Bootstrap资源路径，确认引入的是Bootstrap 4版本的样式文件，没有误引入Bootstrap 5的资源即可。

3. 其他排查方向 #

如果版本匹配但样式仍不生效，依次排查以下情况：

• 确认当前测试的屏幕宽度达到md断点要求（≥768px），响应式类仅在对应断点及以上尺寸生效，窗口宽度小于768px时mr-md-5本身就不会触发
• 检查是否有自定义CSS规则覆盖了Bootstrap的margin样式
• 确认Bootstrap样式文件的引入顺序在所有自定义CSS之前，避免被自定义样式覆盖

内容的提问来源于stack exchange，提问作者M Talha Sohail