如何在Bootstrap CSS中减少Django表单行内元素的间距？

我正在用Bootstrap、CSS和HTML开发Django表单，目前表单里的Site ID和Switch字段之间间距太大，想把这个间距缩小。我刚接触CSS和Bootstrap，求各位指导，谢谢！

截图显示：表单中的Site ID下拉选择框与Switch下拉选择框之间存在明显的多余空白间距

原代码示例 #

{% csrf_token %}
{{ formset.management_form }}
{% for form in formset %}

<br>
<br>
<div class="row form-row spacer rootrow" style="width: 700px; padding: 0; margin: left;" id = "id_parent">
    <div class="col">
        <!-- <label>{{form.name.label}}</label> -->
    </div>
    <div class="col"  style="width: 25px;">
        <div class="form-group" style="width: 1300px; height: 20px;"> <!--this style= width value changes the width of the form row-->
        <div class="input-group">
            
   
        {% for field in form %}

        <div class="col-auto">
            <label for="{{field.id_for_label}}" >{{ field.label }}{% if field.field.required %}*{% endif %}</label>
        </div>
     
        <div class="col-auto">
            <div class="form-group">
                <div class="form-control"style="padding: 0;">
                    {% ifequal field.name 'site' %}
                        {% render_field field class="dropdownlistener" required=true  %}
                    {% endifequal %}                              
                </div>
            </div>
        </div>

        <div class="col-auto">
            <div class="form-group">
                <div class="form-control"style="padding: 0;">
                    {% ifequal field.name 'switch' %}
                        {% render_field field class="dropdownforswitch" required=true %}
                    {% endifequal %}               
                </div>
            </div>
        </div>
        {% endfor %}
        </div>
        </div>
    </div>
</div>
{% endfor %}

解决方案 #

1. 移除冗余嵌套容器 #

你给字段套了多层form-group和form-control，这些容器自带默认的内边距/外边距，会放大间距。下拉框本身只需要加form-control类即可，不需要额外嵌套。

2. 用Bootstrap内置类调整列间距 #

给外层row添加gx-1类（Bootstrap 5），直接缩小列之间的水平间距（数值越小间距越小，可选gx-0到gx-5）。

3. 清理无效硬编码样式 #

代码里的style="width: 1300px; height: 20px;"和style="width: 25px;"会打乱布局，建议移除或改用响应式类。

修改后的代码 #

{% csrf_token %}
{{ formset.management_form }}
{% for form in formset %}
<br><br>
<div class="row form-row spacer rootrow gx-1" style="width: 700px; margin-left: 0;" id="id_parent">
    <div class="col">
        <!-- <label>{{form.name.label}}</label> -->
    </div>
    <div class="col">
        <div class="input-group">
            {% for field in form %}
                {% ifequal field.name 'site' %}
                <div class="col-auto">
                    <label for="{{field.id_for_label}}">{{ field.label }}{% if field.field.required %}*{% endif %}</label>
                </div>
                <div class="col-auto">
                    {% render_field field class="dropdownlistener form-control" required=true %}
                </div>
                {% endifequal %}
                {% ifequal field.name 'switch' %}
                <div class="col-auto">
                    <label for="{{field.id_for_label}}">{{ field.label }}{% if field.field.required %}*{% endif %}</label>
                </div>
                <div class="col-auto">
                    {% render_field field class="dropdownforswitch form-control" required=true %}
                </div>
                {% endifequal %}
            {% endfor %}
        </div>
    </div>
</div>
{% endfor %}

额外CSS微调（如果仍有间距） #

如果上面的修改还达不到预期，可以添加自定义CSS进一步缩小间距：

/* 缩小列的内边距 */
.form-row .col-auto {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
}
/* 减少label的底部外边距 */
.form-row label {
    margin-bottom: 0.25rem;
}

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