引导4-如何向窗体输入标签添加内联切换

Question

我有下面的Bootstrap 4表格

<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

您可以将状态和切换包在div中，然后使用Bootstrap 4挠性盒类d-flex和justify-content-between来实现它。

小提琴：https://jsfiddle.net/kongallis/r5pc2nq3/9

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