如何用Bootstrap实现两列多行分组表单并解决缩放布局错乱问题

你遇到的缩放后布局崩掉的问题，主要是因为原代码里用了大量固定宽度的自定义样式，破坏了Bootstrap原生的响应式栅格系统，还有一些结构和属性的小错误。咱们来一步步修正，让表单在任何缩放比例下都保持整齐的布局：

原代码的核心问题 #

• 硬写了很多固定宽度（比如width:40%、width:326%、width:103%），缩放时这些固定值无法自适应容器宽度
• 错误的display: display属性，这是无效的CSS
• 没有利用Bootstrap的栅格列（col-*）来分配标签和输入区域的空间，而是用自定义margin和width来对齐，导致响应式失效
• HTML结构有小错误（比如缺少<form>标签，多余的闭合标签）

修正后的完整代码 #

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
    <title>Fruits Form</title>
</head>
<body>
    <div class="container mt-4">
        <form>
            <div class="row">
                <!-- 左列 -->
                <div class="col-sm-6">
                    <h5 class="card-title col-form-label-lg bg-pink p-2 font-weight-bold">Fruits List</h5>
                    
                    <div class="form-group row align-items-center">
                        <label for="serialId" class="col-sm-4 col-form-label-sm">Serial Specification ID</label>
                        <div class="col-sm-7">
                            <input type="text" class="form-control form-control-sm" id="serialId" placeholder="">
                        </div>
                        <div class="col-sm-1">
                            <a href="javascript:UserID('ID')">
                                <img src="./help.png" class="img-rounded" alt="Help" width="25" height="20">
                            </a>
                        </div>
                    </div>

                    <div class="form-group row">
                        <label for="name" class="col-sm-4 col-form-label-sm">Name</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control form-control-sm" id="name" placeholder="">
                        </div>
                    </div>

                    <div class="form-group row">
                        <label for="alias" class="col-sm-4 col-form-label-sm">Alias</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control form-control-sm" id="alias" placeholder="">
                        </div>
                    </div>

                    <h5 class="card-title col-form-label-lg bg-warning p-2 font-weight-bold">DESCRIPTION</h5>
                    <div class="form-group">
                        <textarea class="form-control" rows="5" id="comment"></textarea>
                    </div>
                </div>

                <!-- 右列 -->
                <div class="col-sm-6">
                    <h5 class="card-title col-form-label-lg bg-pink p-2 font-weight-bold">Sub Category</h5>
                    
                    <div class="form-group row">
                        <label for="classification" class="col-sm-4 col-form-label-sm">Classification</label>
                        <div class="col-sm-8">
                            <select class="form-control form-control-sm" id="classification">
                                <option>1</option>
                            </select>
                        </div>
                    </div>

                    <div class="form-group row">
                        <label for="orderCount" class="col-sm-4 col-form-label-sm">No of orders</label>
                        <div class="col-sm-8">
                            <input type="number" class="form-control form-control-sm" id="orderCount" placeholder="">
                        </div>
                    </div>

                    <div class="form-group row">
                        <label for="orderedBy" class="col-sm-4 col-form-label-sm">Ordered by</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control form-control-sm" id="orderedBy" placeholder="">
                        </div>
                    </div>

                    <h5 class="card-title col-form-label-lg bg-pink p-2 font-weight-bold">CONTACTS</h5>
                    
                    <div class="form-group row">
                        <label for="contactName" class="col-sm-4 col-form-label-sm">Ordered Contact Name</label>
                        <div class="col-sm-8">
                            <select class="form-control form-control-sm" id="contactName">
                                <option>1</option>
                            </select>
                        </div>
                    </div>

                    <h5 class="card-title col-form-label-lg bg-pink p-2 font-weight-bold">Customer Specific Details</h5>
                    
                    <div class="form-group row">
                        <label for="existingCustomer" class="col-sm-4 col-form-label-sm">Existing Customer</label>
                        <div class="col-sm-8">
                            <select class="form-control form-control-sm" id="existingCustomer">
                                <option>YES</option>
                                <option>NO</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>

    <style>
        /* 自定义粉色背景类，替代内联样式 */
        .bg-pink {
            background-color: pink;
        }
    </style>
</body>
</html>

关键修改说明 #

1. 移除所有固定width内联样式：改用Bootstrap的col-sm-4、col-sm-8等栅格列来分配标签和输入区域的宽度，这样缩放时会自动按比例适配容器。
2. 修复帮助图标的布局：把图标放在单独的col-sm-1里，和输入框同属一个row，确保缩放时不会错位。
3. 修正无效CSS属性：删掉了错误的display: display，用Bootstrap的原生类控制显示方式。
4. 统一表单元素类型：把错误的type="email"改成对应类型（比如文本、数字），更符合语义。
5. 自定义样式抽离：把重复的粉色背景样式抽成独立的CSS类.bg-pink，避免内联样式冗余。
6. 修复HTML结构：补上了<form>标签，修正了闭合标签的错误，让结构更规范。

这样修改后，不管怎么缩放页面，表单的两列布局、标签和输入框的对齐方式都会保持一致，不会出现元素错位的问题。

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