如何样式 bootstrap 切换开关

Question

我在设置 bootstrap 切换按钮的样式时遇到问题。我似乎无法进行任何样式设置。

我真的只需要增加它的宽度，但即使这样也行不通。 Here's a link to the jsfiddle。我想让拨动开关变大一点。欢迎任何帮助！

<div class="col-sm-1 col-lg-3">
  <label>Show available teams only</label>
  <div class="custom-control custom-switch">
    <input type="checkbox" class="custom-control-input form-control" id="checkboxx">
    <label class="custom-control-label" for="checkboxx"></label>
  </div>
</div>

再一次，如果有人能告诉我如何设置 bootstrap 切换按钮的样式，我们将不胜感激！

Answer 1

更改label::before的宽度以增加宽度

.custom-switch .custom-control-label::before {
width:50px !important;

}

要根据 label:before 使选中的 label:after 更改 transform 的大小，如下所述

.custom-switch .custom-control-input:checked~.custom-control-label::after {
background-color: #fff;
transform: translateX(1.75rem)!important;

}

!important - is to change the predefined bootstrap css with our css

Before change in your file try in inspect element it will clear your doubt

如何样式 bootstrap 切换开关

how to style bootstrap toggle switch

css

togglebutton

bootstrap-4