根据文档,您需要添加.col-form-label-sm
和.form-control-sm
类(https://getbootstrap.com/docs/5.2/forms/layout/#horizontal-form-label-sizing),但是对于复选框似乎没有任何类似的内容(至少我在文档中没有找到任何内容:https://getbootstrap.com/docs/5.2/forms/checks-radios/#inline).
具体来说,我想知道应该添加哪些html/类来使checkbox和label的大小(sm)与email字段相同:
<div class="row mb-3">
<label for="colFormLabelSm" class="col-sm-1 col-form-label col-form-label-sm">Email</label>
<div class="col-sm-9">
<input type="email" class="form-control form-control-sm" id="colFormLabelSm" placeholder="col-form-label-sm">
</div>
</div>
<div class="row">
<div class="form-check mb-3 offset-sm-1 required" style="position:relative; left: 1.5ex;">
<input id="id_accept" name="accept" required="" tabindex="1" type="checkbox" class="form-check-input ">
<label for="id_accept" class="form-check-label ">
Accept
</label>
</div>
</div>
对应的bootply:https://www.codeply.com/p/p9iw6YQSeD
1条答案
按热度按时间8gsdolmq1#
这是基于你分享的代码。我不知道
fix-bs5.scss
有什么。我使用的是bootstrap 5.2,没有额外的CSS。这是正确对齐的
只需将
small
添加到表单 Package 器div中。原始DOM结构
新结构
您可以将其放置在现有输入字段下,而不是创建另一个
row
。您不需要
style="position:relative; left: 1.5ex;"