Bootstrap 4 - 如何将切换内联添加到表单输入标签

Question

我有以下Bootstrap4个表格

<div class="form-layout">
            <div class="row mg-b-25">
                <div class="col-lg-4">
                    <div class="form-group">
                        <label class="form-control-label">Status: <span class="tx-danger">*</span></label>
                        <input class="form-control" type="text" name="status" value="" placeholder="Enter status">
                    </div>
                </div><!-- col-4 -->
      </div>
</div>

我想达到的效果如下

我将其用于切换：https://simontabor.com/labs/toggles/

Answer 1

您可以将 Estatus 和切换器包装在 div 中，然后使用 Bootstrap 4 flexbox 类 d-flex 和 justify-content-between 来实现它.

Fiddle: https://jsfiddle.net/kongallis/r5pc2nq3/9

切换代码来源：https://www.w3schools.com/howto/howto_css_switch.asp

Bootstrap 4 - 如何将切换内联添加到表单输入标签

Bootstrap 4 - how to add a toggle inline to a form input label

bootstrap-4