我想将表单框串联而不是堆叠

Question

。 我想知道如何内嵌显示日期表单而不是堆叠显示。 先感谢您！ :)

我使用 bootstrap 和 django 所以我尝试使用 bootstrap 甚至 django 模板来解决问题 但无处可去。

<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 ">{% render_field form.date class+="form-control " %}</div>
            <div class="col">{% 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>

Answer 1

这可能有效，请尝试并告诉我

<div class="col-md-6">{% render_field form.date placeholder="Date" class="form-control" %}</div>
<div class="col-md-6">{% render_field form.time placeholder="Time" class="form-control" %}</div>

Answer 2

尝试以下CSS：

.date-input-wrapper  {
    display: flex;
    flex-direction: row;
}
.date-input-wrapper > .form-group {
    width: calc(100% / 3);
}

当然，您必须正确包装父元素。
希望您的 render_form 方法能够像这样包装 HTML：

<div class="date-input-wrapper">
    <div class="form-group">
        label
        input
    </div>
    <div class="form-group">
        label
        input
    </div>
    <div class="form-group">
        label
        input
    </div>
</div>

如果它被渲染为：

<div class="date-input-wrapper">
    <input class="form-group"/>
    <input class="form-group"/>
    <input class="form-group"/>
</div>

您可以将 > .form-group 替换为 > 输入：

.date-input-wrapper > input {
    width: calc(100% / 3);
}