Bootstrap登录表单元素居中异常及圆角样式设置问题求助

问题1：元素无法正确居中 #

你的代码存在栅格嵌套错误，标题直接放在row下未包裹在col中，导致布局逻辑混乱；同时用空col占位的方式不够严谨，容易在不同屏幕尺寸下出现错位。

修正方案： #

• 所有内容需放在container（或container-fluid）内，确保Bootstrap栅格系统正常工作；
• 标题用col-12包裹，配合text-center实现水平居中；
• 表单和注册提示框使用justify-content-center（栅格行的水平居中类）或mx-auto（元素水平居中类）替代空col占位，保证全屏幕尺寸下对齐一致。

问题2：表单圆角无效/全局圆角问题 #

Bootstrap的rounded-*类无效大概率是样式被覆盖，或是自定义CSS未指定目标元素导致全局生效。

修正方案： #

• 给登录表单容器添加唯一类名（如login-card），自定义CSS时仅针对该类设置圆角，避免影响其他div；
• 确保Bootstrap CSS在自定义CSS之前引入，避免样式优先级冲突；
• 可通过浏览器开发者工具检查border-radius属性的覆盖情况，调整样式优先级。

修正后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link rel="stylesheet" href="css/style.css" >
    <title>Social Network</title>
    <style>
        /* 仅针对登录表单设置圆角，不影响全局元素 */
        .login-card {
            border-radius: 1rem; /* 可按需调整圆角大小 */
        }
    </style>
</head>

<body class="bg-primary">
<div class="container">
    <!-- 标题区域 -->
    <div class="row my-5">
        <div class="col-12 text-center">
            <header class="fs-3 text-white">SOCIAL NETWORK</header>
        </div>
    </div>

    <!-- 登录表单区域 -->
    <div class="row justify-content-center">
        <div class="login-card bg-light p-4 col-10 col-md-4 px-5">
            <div>
                <input type="email" class="form-control my-5" id="inputUsername" aria-describedby="emailHelp" placeholder="Username">
                <input type="password" class="form-control my-5" id="inputPassword1" placeholder="Password">
            </div>
            <div class="text-center">
                <button type="submit" class="btn btn-primary my-5">Log In</button>
            </div>
            <div class="text-center my-4 text-secondary">OR</div>
            <div class="text-center">
                <a class="text-decoration-none link-secondary" href="">Forgot Password?</a>
            </div>
        </div>
    </div>

    <!-- 注册提示区域 -->
    <div class="row justify-content-center my-4">
        <div class="text-center text-secondary rounded-pill bg-light col-10 col-md-4 py-3" id="signUp">
            Don't have an account? <a class="text-primary px-3" href="">Sign Up</a>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>

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