在开关复选框之前引导 5 个文本（无需额外的插件/插件）

Answer 1

如果您将 Off 标签放在复选框之前并让所有内容都

display: inline-block

会怎样？

<link href="https://cdn.jsdelivr.net/npm/[email protected]/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>

演示

Answer 3

引导5.3

form-check-reverse 交换标签和输入的位置； form-check-inline 清除填充/边距；

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
      <div class="form-check form-check-inline form-check-reverse">
        <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
        <label class="form-check-label" for="flexSwitchCheckDefault">Label on the left</label>
      </div>
      <hr>
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
        <label class="form-check-label" for="flexSwitchCheckDefault">Label on the right</label>
      </div>