Bootstrap表单输入框间距异常，调整后布局混乱求助

你的输入栏挤在一起的核心问题是所有表单元素都塞进了同一个.row容器，Bootstrap的列是浮动布局，超过12列后会自动换行，但没有默认垂直间距；再加上输入框自定义了margin-left: -25px，进一步加剧了元素重叠。

修复方案： #

1. 拆分row容器：把每2组（标签+输入）放在一个独立的.row里，每组占6列（4+2），刚好填满12列，同时给每个.row添加垂直间距。
2. 移除负margin：删掉输入框上的margin-left: -25px，避免破坏Bootstrap的列布局。
3. 统一间距样式：用Bootstrap内置的mb-3类（或者自定义CSS）给每个row添加底部间距，也可以给标签/输入框组单独加间距。

修改后的代码示例： #

<!-- 第一行：2组表单 -->
<div class="row mb-3">
    <div class="col-xs-4">
        Fuel temp probe cap:
    </div>
    <div class="col-xs-2">
        <input type="text" id="temp_prob" style="height: 20px; width: 100px;">
    </div>
    <div class="col-xs-4">
        Canister:
    </div>
    <div class="col-xs-2">
        <input type="text" id="purge_vol" style="height: 20px; width: 100px;">
    </div>
</div>

<!-- 第二行：2组表单 -->
<div class="row mb-3">
    <div class="col-xs-4">
        Fuel Tank:
    </div>
    <div class="col-xs-2">
        <input type="text" id="battery_volt" style="height: 20px; width: 100px;">
    </div>
    <div class="col-xs-4">
        Manufacture:
    </div>
    <div class="col-xs-2">
        <input type="text" id="battery_cap" style="height: 20px; width: 100px;">
    </div>
</div>

<!-- 第三行：2组表单 -->
<div class="row mb-3">
    <div class="col-xs-4">
        Manufacture:
    </div>
    <div class="col-xs-2">
        <input type="text" id="rec_energy" style="height: 20px; width: 100px;">
    </div>
    <div class="col-xs-4">
        Part Number:
    </div>
    <div class="col-xs-2">
        <input type="text" id="soc_min" style="height: 20px; width: 100px;">
    </div>
</div>

<!-- 第四行：2组表单 -->
<div class="row mb-3">
    <div class="col-xs-4">
        Material:
    </div>
    <div class="col-xs-2">
        <input type="text" id="num_of_cycles" style="height: 20px; width: 100px;">
    </div>
    <div class="col-xs-4">
        SOC min:
    </div>
    <div class="col-xs-2">
        <input type="text" id="cop_file" style="height: 20px; width: 100px;" disabled="disabled">
    </div>
</div>

额外优化（可选）： #

如果需要更精细的控制，可以给每个标签+输入的组合单独用form-group包裹，再添加自定义CSS：

.form-group {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}

然后调整结构为：

<div class="row">
    <div class="col-xs-6">
        <div class="form-group">
            <label class="col-xs-8">Fuel temp probe cap:</label>
            <div class="col-xs-4">
                <input type="text" id="temp_prob" style="height: 20px; width: 100%;">
            </div>
        </div>
    </div>
    <!-- 其他组同理 -->
</div>

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