django-bootstrap5 和按钮对齐

Posted 2023-02-24

【中文标题】django-bootstrap5 和按钮对齐

【英文标题】：django-bootstrap5 and button alignment

【发布时间】：2022-01-17 07:32:22

【问题描述】：

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

看起来是这样的：

应该是这样的：

对应代码：

表格：

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>

【参考方案1】：

尝试引导网格系统，

模板.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 轴的底端（百分比确保即使在调整大小时它也保持在下方）

【讨论】：

这行得通，但是，当使用具有两个字段的表单时，按钮现在总是停留在第一行。

请更新图片并说明您希望按钮显示的确切位置

就是这样做的。你只是更快。

你的代码看起来不错。你只需要稍微调整 CSS 部分......只是为了方便视觉尝试为 col div 设置不同的背景颜色（ col-9 和 col-3 以便你可以可视化分区）然后你会看到尝试放置使用任何 css 定位的底部按钮...我将更新上面 css 部分的一种可能方式

不，不这么认为.. 试着想象一下这个......首先你创建一行 12 个部分......然后你把那个平面（12 个部分的行）分成两个平面，分别是 9parts 和 3分别是零件...不，您采用 9 部分窗格，然后再次创建两个 cols（col-12 表示一行）填充大小..因此在整个过程中右侧平面不受干扰...所以现在只需定位按钮在右窗格中的任何位置.. 抱歉，如果这令人困惑：o