为什么Bootstrap类mr-4无法生效？新手技术咨询

你代码里的mr-4不生效，是因为你用的是Bootstrap 5，但mr-*是Bootstrap 4的间距类命名规则。

Bootstrap 5为了适配RTL（从右到左）布局，对间距类做了统一重命名：

• 原mr-*（margin-right） → 替换为me-*（margin-end）
• 原ml-*（margin-left） → 替换为ms-*（margin-start）
• 同理，padding类的pr-*→pe-*，pl-*→ps-*

另外，你代码里的form-group类在Bootstrap 5中已经被移除，不再有默认样式，建议用mb-3来控制表单组之间的垂直间距。

修改后的代码如下：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Fetch API Sandbox</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
</head>
<body>
    <div class="container">
        <h1 class="display-4 mb-4">Fetch API Sandbox</h1>
        <div class="d-flex">
            <button class="btn btn-primary me-4" id="getText">Get Text</button>
            <button class="btn btn-success me-4" id="getUsers">Get JSON</button>
            <button class="btn btn-warning me-4" id="getPosts">Get API DATA</button>
        </div>
        <hr>
        <div id="output"></div>
        <form id="addPost">
            <div class="mb-3">
                <input type="text" id="title" placeholder="Title" class="form-control">
            </div>
            <div class="mb-3">
                <textarea id="body" placeholder="Body" class="form-control"></textarea>
            </div>
            <input type="submit" value="Submit" class="btn btn-secondary">
        </form>
    </div>
</body>
</html>

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