Javascript 增加引导复选框的大小

我使用官方引导文档中的代码创建了一个简单的复选框：

<div class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input" id="customCheck" name="example1">
    <label class="custom-control-label" for="customCheck">Check this custom checkbox</label>
</div>

选中此自定义复选框

---

我想知道如何使复选框比当前更大？我尝试过编辑

customCheck

的css并更改高度和宽度属性，但这不会增加框的大小。

更改引导组件的尺寸不是一个好主意，您应该更改引导中的变量，但这意味着重新编译库。 无论如何，你想要的可以通过以下方式实现：

.custom-control-label::before ,.custom-control-label::after{width:20px; height:20px}

---

因为您试图在引导中完成它，所以很容易。 首先使用

btn group toggle

添加一个div容器，以使用组中的按钮（如果需要的话）

在标签中添加

p-3

或

p-5

类，以根据您的喜好进行扩展

<div class="btn-group-toggle" data-toggle="buttons">
        <label class="btn btn-secondary p-3">
            <input type="checkbox" id="customCheck" name="example1"> Check this custom checkbox
        </label>
    </div>

选中此自定义复选框

下面是一个使用自定义css的工作示例

.custom复选框lg.custom控件标签：：之前，
.custom复选框lg.custom控件标签：：after{
宽度：2em；
高度：2em；
}
.自定义复选框lg.自定义控件标签{
保证金：5雷姆1雷姆；
}

选中此自定义复选框
选中此自定义复选框

您可以尝试以下方法：

.custom控件标签：：在，
.自定义控件标签：：之后{
宽度：2.25rem！重要；
高度：2.25rem！重要；
保证金：1rem；
}
.自定义控件标签{
保证金：1.5雷姆2雷姆；
}

选中此自定义复选框

在bootstrap 4中，如果您想更改或增加自定义开关（来自iOS的漂亮开关），您应该深入bootstrap的css文件，并更改其自定义开关类的维度。 html代码如下所示：

<div class="custom-control custom-checkbox">
 <input type="checkbox" class="custom-control-input" id="switchA" name="switch">
 <label class="custom-control-label" for="switchA">Custom checkbox</label>
</div>

将这些代码复制到引导文件后，必须删除所有代码 评论我输入。否则，它不会增加大小。我希望你喜欢 你现在有了一个更大更漂亮的开关

---

最好拥有自己的文件，并更改开关尺寸的css变量：

@import "bootstrap/scss/_functions.scss";
@import "bootstrap/scss/_variables.scss";

$custom-control-indicator-size: 1.5rem;
$custom-switch-width: $custom-control-indicator-size * 1.75;
$custom-switch-indicator-border-radius: $custom-control-indicator-size / 2;
$custom-switch-indicator-size: subtract(
  $custom-control-indicator-size,
  $custom-control-indicator-border-width * 4
);

@import "bootstrap/scss/bootstrap";

---

此类

.custom switch adaptive

将使开关适应文本大小，并将标签文本包含在内

附言

SCSS

.custom-switch.custom-switch-adaptive {
  padding-left: 0;

  .custom-control-label {
    padding: 0 1.5em;
    position: relative;
    border-radius: 1em;
    line-height: 1.4em;
    color: $text-muted;
    border: 1px solid $text-muted;
    background-color: $light;
    transition: background-color 200ms;

    &::before {
      content: none;
    }
    &::after {
      position: absolute;
      height: 1em;
      top: 0.2em;
      left: 0.2em;
      width: 1em;
      border-radius: 1em;

      transition: left 200ms;
    }
  }


  .custom-control-input:checked ~ .custom-control-label {
    color: $white;
    background-color: $success;
    border-color: $success;

    &::after {
      background-color: $white;
      left: calc(100% - 1.2em);

      transform: none;
      -webkit-transform: none;
    }
  }
}

HTML

<div class="form-group h1">
  <div class="custom-control custom-switch custom-switch-adaptive">
    <input id="test4" type="checkbox" class="custom-control-input">
    <label for="test4" class="custom-control-label">h1 text size</label>
  </div>
</div>

h1文本大小

我为引导开关添加了

*-sm、*-md、*-lg、*-xl等类

在这里，我使用一个@mixin（@mixin非常类似于JS函数，但它不返回任何内容）来切换所有分辨率


对于引导4
自定义开关sm、自定义开关md、自定义开关lg、自定义开关xl

SCSS:

CSS:

实时片段（CSS）


用于sm的
/**/
.custom-switch.custom-switch-sm.自定义控件标签{
左：1rem；
垫底：1毫米；
}
.custom-switch.custom-switch-sm.custom控件标签：：before{
高度：1公厘；
宽度：计算（1rem+0.75rem）；
边界半径：2em；
}
.custom-switch.custom-switch-sm.custom控件标签：：after{
宽度：计算（1rem-4px）；
高度：计算（1rem-4px）；
边界半径：计算（1rem-（1rem/2））；
}
.custom-switch.custom-switch-sm.自定义控件输入：选中~.custom控件标签：：after{
转换：translateX（计算（1rem-0.25rem））；
}
/*医学博士*/
.custom-switch.custom-switch-md.自定义控件标签{
左：2rem；
垫底：1.5rem；
}
.custom-switch.custom-switch-md.custom控件标签：：before{
高度：1.5雷姆；
宽度：计算（2rem+0.75rem）；
边界半径：3rem；
}
.custom-switch.custom-switch-md.custom控件标签：：after{
宽度：calc（1.5rem-4px）；
高度：计算（1.5雷姆-4倍）；
边界半径：计算（2rem-（1.5rem/2））；
}
.custom-switch.custom-switch-md.自定义控件输入：选中~.custom控件标签：：after{
转换：translateX（计算值（1.5rem-0.25rem））；
}
/*对于lg*/
.custom-switch.custom-switch-lg.自定义控件标签{
左：3rem；
垫底：2rem；
}
.custom-switch.custom-switch-lg.custom控件标签：：before{
高度：2em；
宽度：计算（3rem+0.75rem）；
边界半径：4rem；
}
.custom-switch.custom-switch-lg.custom控件标签：：after{
宽度：计算（2rem-4px）；
高度：计算（2rem-4px）；
边界半径：计算（3rem-（2rem/2））；
}
.custom-switch.custom-switch-lg.自定义控件输入：选中~.custom控件标签：：after{
转换：translateX（计算（2rem-0.25rem））；
}
/*对于xl*/
.custom-switch.custom-switch-xl.自定义控件标签{
左：4rem；
垫底：2.5rem；
}
.custom-switch.custom-switch-xl.custom控件标签：：before{
高度：2.5雷姆；
宽度：计算（4rem+0.75rem）；
边界半径：5雷姆；
}
.custom-switch.custom-switch-xl.custom控件标签：：after{
宽度：calc（2.5rem-4px）；
高度：计算（2.5雷姆-4倍）；
边界半径：计算（4rem-（2.5rem/2））；
}
.custom-switch.custom-switch-xl.自定义控件输入：选中~.custom控件标签：：after{
转换：translateX（计算值（2.5雷姆-0.25雷姆））；
}

默认未勾选开关
默认选中开关
默认未勾选开关
默认选中开关
默认未勾选开关
默认选中开关
默认未勾选开关
默认选中开关
Bootstrap 5
我修改了Nisharg Shah的css，使文本现在与Bootstrap V5示例的开关很好地对齐。
因此，我查看了Bootstrap 5 css源，并增加了所有似乎与大小调整有关的属性：
左填充
、
高填充
、
左边距
、
宽度
和
顶部填充
。
我认为结果看起来更好，并且与默认的开关外观样式一致

CSS和HTML：
.form-switch.form-switch-md{
衬垫
<div class="form-group h1">
  <div class="custom-control custom-switch custom-switch-adaptive">
    <input id="test4" type="checkbox" class="custom-control-input">
    <label for="test4" class="custom-control-label">h1 text size</label>
  </div>
</div>