如何让Bootstrap表单输入框响应式适配，并将表单列居中显示在页面中央

修复后完整代码 #

<!DOCTYPE html>
<html>
<head>
    <title>Login/Register</title>
    <style type="text/css">
        body{
            margin:0;
            padding:20px;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow-x: hidden!important;
        }
        .containor{
            max-width: 1000px;
            width: 100%;
            margin: 0 auto;
        }
        .form-group input{
            height: 40px;
            border-color: silver;
            padding: 0 10px;
            margin-top: 3px;
            margin-bottom: 10px;
        }
        .form-group label{
            text-align: left;
            padding-left: 3px;
            margin-bottom: 3px;
        }
        .buttons{
            margin-top: 20px;
        }
        .buttons button{
            margin-bottom: 10px;
        }
    </style>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
    <div class="containor">
        <div class="row g-0">
            <div class="col-md-6 col-sm-12 border" id="login_section">
                <form class="m-4" action="#" method="post">
                    <div class="form-group">
                        <h1 class="m-3 text-center fs-3">Welcome to Login Section!</h1>
                        <label>Email</label>
                        <input type="text" class="form-control" name="u_email">
                        <label>Password</label>
                        <input type="password" class="form-control" name="paswd">
                        <br>
                        <div class="buttons">
                            <button type="submit" class="btn btn-outline-info w-100 rounded-pill">Login</button>
                            <button type="reset" class="btn btn-outline-danger w-100 rounded-pill">Clear Credentials</button>
                            <a href="#" class="d-block text-center mt-2">Forgot password!</a>
                        </div>
                    </div>
                </form>
            </div>
            <div class="col-md-6 col-sm-12 border" id="reg_section">
                <form class="m-4" action="#" method="post">
                    <div class="form-group">
                        <h1 class="m-3 text-center fs-3">Don't have an Account yet!<br>Register In Here</h1>
                        <label>Email</label>
                        <input type="text" class="form-control" name="u_email">
                        <label>Password</label>
                        <input type="password" class="form-control" name="paswd">
                        <label>Confirm Password</label>
                        <input type="password" class="form-control" name="confirm_paswd">
                        <br>
                        <div class="buttons">
                            <button type="submit" class="btn btn-outline-success w-100 rounded-pill">Register</button>
                            <button type="reset" class="btn btn-outline-danger w-100 rounded-pill">Clear Info</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</body>
</html>

核心修改点说明 #

• 移除输入框固定宽度：删除了原代码中.form-group input的width:900px属性，依托Bootstrapform-control自带的100%宽度特性，实现输入框自动跟随父容器宽度适配不同屏幕尺寸
• 整体布局居中：给body添加flex布局属性，设置最小高度为100vh，让表单容器始终在页面可视区域垂直水平居中；给容器设置最大宽度限制+左右自动边距，保证左右留白均衡
• 栅格布局修正：删除无效的自定义栅格类，使用Bootstrap标准响应式栅格，中等及以上屏幕显示左右两列，小屏幕自动堆叠为单列
• 细节优化：调整表单内边距、按钮间距，修正原代码的拼写错误（重置按钮type属性、注册单词拼写等），优化小屏幕显示效果

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