Bootstrap 5中.sr-only类失效求助：添加类后标签仍可见

你遇到的问题核心是使用了Bootstrap 5已废弃的form-inline类，这个类在Bootstrap 5中被移除，导致表单布局异常，进而影响了sr-only类的隐藏效果。

解决步骤： #

• 删掉表单上的form-inline类，改用Bootstrap 5的flex布局类实现行内表单效果
• 保留sr-only类即可（Bootstrap 5中它是visually-hidden的别名，功能完全一致，也可以直接替换成visually-hidden）

修改后的完整代码： #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">

    <title>Document</title>
</head>
<body>
    <form class="d-flex align-items-center gap-2">
        <div class="form-group">
          <label for="staticEmail2" class="sr-only">Email</label>
          <input type="text" readonly class="form-control" id="staticEmail2" value="email@example.com">
        </div>
        <button type="submit" class="btn btn-primary">Confirm identity</button>
    </form>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
</body>
</html>

补充说明： #

• d-flex将表单设置为弹性布局，实现元素行内排列
• align-items-center让表单元素垂直居中对齐
• gap-2控制元素间的间距，比原来的mb-2更适配flex布局，也可以根据需求换成gap-3等不同间距类
• 移除了冗余的mb-2类，避免不必要的间距冲突

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