在bootstrap 5.2中,有没有办法让复选框变小/变大?

5uzkadbs  于 2022-12-07  发布在  Bootstrap
关注(0)|答案(1)|浏览(183)

根据文档,您需要添加.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

8gsdolmq

8gsdolmq1#

这是基于你分享的代码。我不知道fix-bs5.scss有什么。我使用的是bootstrap 5.2,没有额外的CSS。
这是正确对齐的

只需将small添加到表单 Package 器div中。

...
    <div class="form-check small mb-3 offset-sm-1 required" style="position:relative; left: 1.5ex;">
        <!-- input and label -->
    </div>
....

原始DOM结构

container
    ├── row/
    │   └── label/
    │       └── col-9/
    │           └── input
    └── row/
        └── div/
            ├── input
            └── label

新结构

您可以将其放置在现有输入字段下,而不是创建另一个row

container
    └── row/
        └── label/
            └── col-9/
                ├── input
                └── div/
                    ├── input
                    └── label

您不需要style="position:relative; left: 1.5ex;"

<div class="container shadow min-vh-100 py-2">
    <div class="row mb-3">
        <!-- col left -->
        <label for="colFormLabelSm" class="col-sm-1 col-form-label col-form-label-sm">Email</label>
        <!-- col right -->
        <div class="col-sm-9">
            <input type="email" class="form-control form-control-sm" id="colFormLabelSm" placeholder="col-form-label-sm">
            <div class="form-check small mb-3 mt-2 required">
                <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>
    </div>
</div>

相关问题