如何让Bootstrap+Django表单中的日期控件行内显示而非堆叠？

要让日期和时间控件和其他表单元素在同一行紧凑显示，核心是调整Bootstrap的栅格列类，不用额外加display: inline-flex，具体做法如下：

• 把日期和时间控件所在的col类改成col-auto，这个类会根据控件内容自动分配宽度，避免col强制平分宽度导致的换行堆叠。
• 保留row容器的flex布局，它会自动让子列在一行排列（空间足够时）。

修改后的代码如下：

<div class="container" style="width: 750px;"> 
    <form action="" method="POST">
        {% csrf_token %}
        <div class="row mb-4">
            <div class="col">{% render_field form.name placeholder="Name" class+="form-control" %}</div>
            <div class="col">{% render_field form.phone placeholder="Phone" class+="form-control" %}</div>
        </div>
        
        <div class="row mb-4">
            <div class="col">{% render_field form.people placeholder="People" class+="form-control" %}</div>
            <div class="col-auto">{% render_field form.date class+="form-control" %}</div>
            <div class="col-auto">{% render_field form.time placeholder="Time" class+="form-control" %}</div>            
        </div>
        
        <div class="row mx-auto">
            <button type="submit" value="Refresh" class="btn btn-primary">Submit</button>
        </div>
    </form>
</div>

如果需要更精确的宽度控制，也可以给日期、时间控件的列指定具体宽度类，比如col-3、col-4，根据你的布局需求调整即可。

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