html - 将表单标签 input-group-prepend 与 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>
如下图所示,“标签”都是未对齐的。我希望他们都一样长,这样他们就可以很好地排队
解决方案
推荐阅读
- microsoft-graph-api - 在 Microsoft Graph 中获取附加消息的附件
- javascript - Javascript 函数在 Google 检查功能中触发,但并非如此
- python - 如何使用网格而不是包使我的 python 滚动条可滚动和画布自动调整大小
- linux - 在 bash case 语句中出现语法错误
- excel - 增加范围
- xslt - 如何比较同一组的兄弟姐妹?
- javascript - 我正在制作基于文本的 RPG,您可以在每个屏幕上说是或否,我需要帮助删除事件监听器
- javascript - 上传pdf文件时如何在浏览器中显示pdf
- php - 使用键值重定向 PHP url
- java - Spring批处理spring jpa错误CannotCreateTransactionException:无法为事务IllegalStateException打开JPA EntityManager: