如何将Django表单设置为横向（水平）排列？

一、通过HTML模板调整（推荐，更灵活） #

你当前代码直接渲染整个表单实例{{fa}}，会让每个字段默认纵向堆叠。结合你用的Bootstrap栅格系统，拆分字段逐个渲染并分配列宽，就能实现横向布局：

修改后的模板代码：

<div class="tab-pane fade container-fluid p-2" id="profile" role="tabpanel" aria-labelledby="profile-tab">
    <h6 class="m-0 font-weight-bold text-primary">Horas Adicionais</h6>
    <div class="row mt-4">
        <div class="col">
            {{ form_funcionarioadicional.management_form }}

            {% for fa in form_funcionarioadicional %}
                <div class="faform row align-items-center mb-3">
                    <!-- 逐个渲染字段，分配Bootstrap列宽 -->
                    <div class="col-md-3">
                        {{ fa.nome.label_tag }}
                        {{ fa.nome }}
                    </div>
                    <div class="col-md-3">
                        {{ fa.horas.label_tag }}
                        {{ fa.horas }}
                    </div>
                    <div class="col-md-3">
                        {{ fa.data.label_tag }}
                        {{ fa.data }}
                    </div>
                    <!-- 其他字段同理添加 -->
                    {% if fa.instance.pk %}
                        {{ fa.DELETE }}
                    {% endif %}
                </div>
            {% endfor %}
        </div>
    </div>
</div>

• 核心是把{{fa}}拆成每个字段的label_tag和字段本身，放在col-md-*列容器中，让它们在同一行排列。
• 用align-items-center让字段与标签垂直居中，mb-3增加表单实例间的间距。
• 如果是表单集，记得保留DELETE字段（若启用）。

二、通过forms.py配置辅助 #

可以在表单类里给每个字段的widget添加Bootstrap样式类，让字段适配横向布局：

from django import forms
from .models import FuncionarioAdicional

class FuncionarioAdicionalForm(forms.ModelForm):
    class Meta:
        model = FuncionarioAdicional
        fields = ['nome', 'horas', 'data']
        widgets = {
            'nome': forms.TextInput(attrs={'class': 'form-control'}),
            'horas': forms.NumberInput(attrs={'class': 'form-control'}),
            'data': forms.DateInput(attrs={'class': 'form-control', 'type': 'date'}),
        }

• 给每个widget添加form-control类，确保字段样式统一，配合模板栅格布局更美观。
• 这种方法主要是统一字段样式，核心布局仍需靠模板控制。

注意事项 #

• 若表单字段较多，可调整col-md-*的数值，确保一行总列数不超过12，超出会自动换行。
• 若要让多个表单实例横向排列（而非单个表单内字段横向），可把每个faform的row改成col-md-4（比如一行放3个），外层保留row容器。

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