django-bootstrap5 和按钮对齐

Question

我想在表单旁边而不是下面显示一个按钮：

这是它的样子：

应该是这样的：

对应代码：

形式：

class TheForm(forms.Form):
    var = forms.ChoiceField(choices = choices, label = "")

温度

late:

{% if TheForm %}
    <form method = "post">
        {% csrf_token %}
        {% bootstrap_form TheForm %}
        {% bootstrap_button button_type="submit" content="OK" %}
    </form>
 {% endif %}

编辑：成功了，但代码仅适用于一个输入字段：

我想象它会是这样的：

但生成的代码看起来也很奇怪：

<form method="POST" action="/singleDevice">
    <input type="hidden" name="csrfmiddlewaretoken" value="...">
    <div class="row">
        <div class="col-9">
            <div class="col-12">
                <select name="env" class="form-select" id="id_env">
                    <option value="0">A</option>
                    <option value="3">NB</option>
                </select>
             </div>
             <div class="col-12">
                <label class="visually-hidden" for="id_Number">directly enter a number</label>
                <input type="text" name="Number" class="form-control" placeholder="directly enter a number" id="id_Number">
            </div>
        </div>
        <div class="col-3"> 
            <button class="btn btn-primary" type="submit">OK</button>
        </div>
    </div>
</form>

Answer 1

尝试bootstrap网格系统，

template.html

{% if TheForm %}
    <form method = "post">
        {% csrf_token %}
        <div class="row"> <!-- creates a row of 12 parts -->
            <div class="col-lg-9"> <!-- Creates a column with width of 9 parts out of the above 12 parts -->
                {% bootstrap_form TheForm %}
            </div>
            <div class="col-lg-3">  <!-- Creates a column with width of remaining 3 parts out of the above 12 parts -->
                {% bootstrap_button button_type="submit" content="OK" %}
            </div>
        </div>
    </form>
 {% endif %}

编辑：CSS 在表单末尾设置按钮

<form method="POST" action="/singleDevice">
    <input type="hidden" name="csrfmiddlewaretoken" value="...">
    <div class="row">
        <div class="col-9">
            <div class="col-12">
                <select name="env" class="form-select" id="id_env">
                    <option value="0">PROD</option>
                    <option value="1">QA</option>
                    <option value="2">DEV</option>
                    <option value="3">NB</option>
                </select>
             </div>
             <div class="col-12">
                <label class="visually-hidden" for="id_Number">directly enter a number</label>
                <input type="text" name="Number" class="form-control" placeholder="directly enter a number" id="id_Number">
            </div>
        </div>
        <div class="col-3"> 
            <button class="btn btn-primary form-submit-button" type="submit">OK</button>
        </div>
    </div>
</form>

base.css:

.form-submit-button{
    display: inline-block;
    margin-top: 95%;  /* (approx) */
}

更改： 我已经为提交按钮设置了一个类名，并使用 margin-top 将提交按钮推到 y 轴的底端（百分比确保它保持不变甚至在调整大小时以下）

django-bootstrap5 和按钮对齐

django-bootstrap5 and button alignment

django

django-templates

django-forms

bootstrap-5