Bootstrap4中label与input表单元素对齐布局实现问题咨询

Bootstrap 4 适配实现代码 #

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap 表单布局示例</title>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
    <style>
        body {
            background-color: #e6ebb1;
            font-family: Verdana, Tahoma, sans-serif;
            font-size: 12px;
        }
        /* 固定标签宽度+右对齐，和原自定义样式效果一致 */
        .form-label-fixed {
            width: 150px;
            text-align: right;
        }
        /* 限制输入框最大宽度，适配不同屏幕 */
        .form-control {
            max-width: 300px;
        }
    </style>
</head>
<body>
    <div class="container pt-5">
        <!-- 第一行表单项 -->
        <div class="form-group row justify-content-center">
            <label for="holder-name" class="col-form-label form-label-fixed mr-3">Nom du Titulaire</label>
            <div class="col-auto">
                <input class="form-control" id="holder-name" name="holder-name" type="text" />
            </div>
        </div>
        <!-- 第二行表单项 -->
        <div class="form-group row justify-content-center">
            <label for="wallet-num" class="col-form-label form-label-fixed mr-3">Numéro de portefeuille</label>
            <div class="col-auto">
                <input class="form-control" id="wallet-num" name="wallet-num" type="text" />
            </div>
        </div>
        <!-- 按钮单独占一行 -->
        <div class="form-group row justify-content-center">
            <div class="col-auto">
                <button type="submit" class="btn btn-primary">Rechercher</button>
            </div>
        </div>
    </div>
</body>
</html>

核心调整说明 #

• 给行元素加justify-content-center类，实现表单内容整体水平居中，匹配原自定义样式里justify-content: center的效果
• 自定义form-label-fixed类固定标签宽度、设置右对齐，和你原有的样式逻辑完全一致
• 把按钮单独拆成独立行，避免和第二行输入框挤占同一行空间
• 删掉输入框行内的width:50%设置，改用max-width限制输入框宽度，适配性更强
• 修复了重复ID的问题，两个输入框ID重复会导致label点击聚焦功能失效

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