Bootstrap 5 text BEFORE switch-checkbox（没有额外的 addons/plugins）

Question

我使用 Bootstrap 5 并且我希望使用开关切换。

我不想使用任何其他插件，但只想使用 bootstrap。

如何在切换开关前放置文本。

这不起作用：

<div class="form-check form-switch">
  off
  <input type="checkbox" class="form-check-input" id="site_state">
  <label for="site_state" class="form-check-label">on</label>
</div>

有人有想法吗？

Answer 1

如果您将 Off 标签放在复选框之前，然后将所有内容设为 display: inline-block 会怎么样？

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"/>


<div class="container">
    <div class="row">
        <div class="col">
            <div class="d-inline-block me-1">Off</div>
            <div class="form-check form-switch d-inline-block">
                <input type="checkbox" class="form-check-input" id="site_state" style="cursor: pointer;">
                <label for="site_state" class="form-check-label">On</label>
                </div>
        </div>
    </div>
</div>

Answer 2

您可以将其包装在 d-flex..

<div class="d-flex">
    off
    <div class="form-switch ms-2">
        <input type="checkbox" class="form-check-input" id="site_state">
    </div>
    <label for="site_state" class="form-check-label">on</label>
</div>

Demo

Bootstrap 5 text BEFORE switch-checkbox（没有额外的 addons/plugins）

Bootstrap 5 text BEFORE switch-checkbox (without extra addons/plugins)

checkbox

switch-statement

bootstrap-5