将表单标签 input-group-prepend 与引导程序对齐答案

【问题标题】：Aligning form labels input-group-prepend with bootstrap将表单标签 input-group-prepend 与引导程序对齐
【发布时间】：2021-12-22 07:05:23
【问题描述】：

我正在使用 bootstrap 开发一个 python/django 网站，但我遇到了一些我自己似乎无法解决的问题。自从我使用 python/django/bootstrap 以来已经有一段时间了，所以我可能会遗漏一些东西？

<form action="" method="post" autocomplete="off">
{% csrf_token %}

{{ form.non_field_errors }}

    <div class="input-group mb-3 col-lg-4">
        <div class="input-group-prepend ">
            <span class="input-group-text" id="basic-addon1">Player Name</span>
        </div>
        <input type="text" class="form-control" id="player_name" name='player_name' placeholder="Player Name">
    </div>

    <div class="input-group mb-3 col-lg-4">
        <div class="input-group-prepend ">
            <span class="input-group-text " id="basic-addon1">Recruiter</span>
        </div>
        {{ form.recruiter }}
    </div>

    <div class="input-group mb-3 col-lg-4">
        <div class="input-group-prepend">
            <span class="input-group-text" id="basic-addon1">Notes</span>
        </div>
        <input type="text" class="form-control" id="notes" name="notes">
    </div>

    <div class="input-group mb-3 col-lg-4">
        <div class="input-group-prepend">
            <span class="input-group-text" id="basic-addon1">Accepted</span>
        </div>
        <select class="form-select form-select-lg" aria-label=".form-select-lg" id='accepted' name='accepted'>
            <option value="Not Yet" selected>Not Yet</option>
            <option value="No">No</option>
            <option value="Yes">Yes</option>
        </select>
    </div>

    <div class="input-group mb-3 col-lg-4">
        <div class="input-group-prepend">
            <span class="input-group-text" id="basic-addon1">Vote is up</span>
        </div>
        <select class="form-select form-select-sm" aria-label=".form-select-sm" id='vote_is_up' name='vote_is_up'>
            <option value="No" selected>No</option>
            <option value="Yes">Yes</option>
        </select>
    </div>
    <div class="form-check">
        <input class="form-check-input" type="checkbox" value="" id="archived" hidden>
        <label class="form-check-label" for="flexCheckDefault" hidden>
            Archived
        </label>
    </div>
    {% if form.errors %}
    {% for field in form %}
        {% for error in field.errors %} 
            <div class="alert alert-danger">
                <strong>{{ error|escape }}</strong>
            </div>
        {% endfor %}
    {% endfor %}
    {% endif %}
<button type="submit" class="btn btn-primary">Add</button>
</form>

如下图所示，“标签”都是未对齐的。我希望他们都一样长，这样他们就可以很好地排队

【问题讨论】：

未对齐 = 顶部比底部多一点空间？
不，我的意思是像玩家姓名、招募人员、备注、接受和投票等标签一样长。我想我用 style="width: 115px;" 修复了它在但不确定你应该如何使用引导程序来做到这一点？
标签只占用与内容相同的空间，这是 Bootstrap 的默认设置。例如，Notes 将比 Player Name 短。如果您需要它们都相同，那么您需要在自定义 css 中添加 width，就像您已经完成的那样。

标签： html css django bootstrap-5

【解决方案1】：

正如我自己和 Siddharth Bhansali 在 cmets 中所说的那样，我需要在跨度的自定义 css 中设置一个固定宽度。所以这些行变成了：

<span class="input-group-text " id="basic-addon1" style="width: 115px;">

【讨论】：