那些遇到过的问题

增加引导程序复选框的大小

16 javascript css bootstrap-4 bootstrap-5

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

<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>
Run Code Online (Sandbox Code Playgroud)

我想知道如何使复选框比当前大？我曾尝试编辑 csscustomCheck并更改高度和宽度属性，但这不会增加框的大小。

Nis*_*hah 30

我添加了类似*-sm, *-md, *-lg, *-xl引导程序开关的类。

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

对于 Bootstrap 4

custom-switch-sm, custom-switch-md, custom-switch-lg, custom-switch-xl

SCSS： https ://codepen.io/nisharg/pen/VwLbYvv

CSS： https : //codepen.io/nisharg/pen/mdJmywW

实时片段 (CSS)

/* for sm */

.custom-switch.custom-switch-sm .custom-control-label {
    padding-left: 1rem;
    padding-bottom: 1rem;
}

.custom-switch.custom-switch-sm .custom-control-label::before {
    height: 1rem;
    width: calc(1rem + 0.75rem);
    border-radius: 2rem;
}

.custom-switch.custom-switch-sm .custom-control-label::after {
    width: calc(1rem - 4px);
    height: calc(1rem - 4px);
    border-radius: calc(1rem - (1rem / 2));
}

.custom-switch.custom-switch-sm .custom-control-input:checked ~ .custom-control-label::after {
    transform: translateX(calc(1rem - 0.25rem));
}

/* for md */

.custom-switch.custom-switch-md .custom-control-label {
    padding-left: 2rem;
    padding-bottom: 1.5rem;
}

.custom-switch.custom-switch-md .custom-control-label::before {
    height: 1.5rem;
    width: calc(2rem + 0.75rem);
    border-radius: 3rem;
}

.custom-switch.custom-switch-md .custom-control-label::after {
    width: calc(1.5rem - 4px);
    height: calc(1.5rem - 4px);
    border-radius: calc(2rem - (1.5rem / 2));
}

.custom-switch.custom-switch-md .custom-control-input:checked ~ .custom-control-label::after {
    transform: translateX(calc(1.5rem - 0.25rem));
}

/* for lg */

.custom-switch.custom-switch-lg .custom-control-label {
    padding-left: 3rem;
    padding-bottom: 2rem;
}

.custom-switch.custom-switch-lg .custom-control-label::before {
    height: 2rem;
    width: calc(3rem + 0.75rem);
    border-radius: 4rem;
}

.custom-switch.custom-switch-lg .custom-control-label::after {
    width: calc(2rem - 4px);
    height: calc(2rem - 4px);
    border-radius: calc(3rem - (2rem / 2));
}

.custom-switch.custom-switch-lg .custom-control-input:checked ~ .custom-control-label::after {
    transform: translateX(calc(2rem - 0.25rem));
}

/* for xl */

.custom-switch.custom-switch-xl .custom-control-label {
    padding-left: 4rem;
    padding-bottom: 2.5rem;
}

.custom-switch.custom-switch-xl .custom-control-label::before {
    height: 2.5rem;
    width: calc(4rem + 0.75rem);
    border-radius: 5rem;
}

.custom-switch.custom-switch-xl .custom-control-label::after {
    width: calc(2.5rem - 4px);
    height: calc(2.5rem - 4px);
    border-radius: calc(4rem - (2.5rem / 2));
}

.custom-switch.custom-switch-xl .custom-control-input:checked ~ .custom-control-label::after {
    transform: translateX(calc(2.5rem - 0.25rem));
}
Run Code Online (Sandbox Code Playgroud) 
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">


<div class="custom-control custom-switch custom-switch-sm">
  <input type="checkbox" class="custom-control-input" id="customSwitch1">
  <label class="custom-control-label" for="customSwitch1">Default Unchcked Switch</label>
</div>

<div class="custom-control custom-switch custom-switch-sm">
  <input type="checkbox" class="custom-control-input" id="customSwitch2" checked>
  <label class="custom-control-label" for="customSwitch2">Default Checked Switch</label>
</div>

<div class="custom-control custom-switch custom-switch-md">
  <input type="checkbox" class="custom-control-input" id="customSwitch3">
  <label class="custom-control-label" for="customSwitch3">Default Unchcked Switch</label>
</div>

<div class="custom-control custom-switch custom-switch-md">
  <input type="checkbox" class="custom-control-input" id="customSwitch4" checked>
  <label class="custom-control-label" for="customSwitch4">Default Checked Switch</label>
</div>

<div class="custom-control custom-switch custom-switch-lg">
  <input type="checkbox" class="custom-control-input" id="customSwitch5">
  <label class="custom-control-label" for="customSwitch5">Default Unchcked Switch</label>
</div>

<div class="custom-control custom-switch custom-switch-lg">
  <input type="checkbox" class="custom-control-input" id="customSwitch6" checked>
  <label class="custom-control-label" for="customSwitch6">Default Checked Switch</label>
</div>

<div class="custom-control custom-switch custom-switch-xl">
  <input type="checkbox" class="custom-control-input" id="customSwitch7">
  <label class="custom-control-label" for="customSwitch7">Default Unchcked Switch</label>
</div>

<div class="custom-control custom-switch custom-switch-xl">
  <input type="checkbox" class="custom-control-input" id="customSwitch8" checked>
  <label class="custom-control-label" for="customSwitch8">Default Checked Switch</label>
</div>
Run Code Online (Sandbox Code Playgroud)

对于 Bootstrap 5

form-switch-sm, form-switch-md, form-switch-lg, form-switch-xl

SCSS：https : //codepen.io/nisharg/pen/gOPLOYY

CSS：https : //codepen.io/nisharg/pen/ExPNxYE

实时片段 (CSS)

.form-check-input {
  clear: left;
}

.form-switch.form-switch-sm {
  margin-bottom: 0.5rem; /* JUST FOR STYLING PURPOSE */
}

.form-switch.form-switch-sm .form-check-input {
  height: 1rem;
  width: calc(1rem + 0.75rem);
  border-radius: 2rem;
}

.form-switch.form-switch-md {
  margin-bottom: 1rem; /* JUST FOR STYLING PURPOSE */
}

.form-switch.form-switch-md .form-check-input {
  height: 1.5rem;
  width: calc(2rem + 0.75rem);
  border-radius: 3rem;
}

.form-switch.form-switch-lg {
  margin-bottom: 1.5rem; /* JUST FOR STYLING PURPOSE */
}

.form-switch.form-switch-lg .form-check-input {
  height: 2rem;
  width: calc(3rem + 0.75rem);
  border-radius: 4rem;
}

.form-switch.form-switch-xl {
  margin-bottom: 2rem; /* JUST FOR STYLING PURPOSE */
}

.form-switch.form-switch-xl .form-check-input {
  height: 2.5rem;
  width: calc(4rem + 0.75rem);
  border-radius: 5rem;
}
Run Code Online (Sandbox Code Playgroud) 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.0-alpha1/css/bootstrap.min.css">

<div class="form-check form-switch form-switch-sm">
  <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
  <label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
</div>

<div class="form-check form-switch form-switch-sm">
  <input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked" checked>
  <label class="form-check-label" for="flexSwitchCheckChecked">Checked switch checkbox input</label>
</div>

<div class="form-check form-switch form-switch-md">
  <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
  <label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
</div>

<div class="form-check form-switch form-switch-md">
  <input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked" checked>
  <label class="form-check-label" for="flexSwitchCheckChecked">Checked switch checkbox input</label>
</div>

<div class="form-check form-switch form-switch-lg">
  <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
  <label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
</div>

<div class="form-check form-switch form-switch-lg">
  <input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked" checked>
  <label class="form-check-label" for="flexSwitchCheckChecked">Checked switch checkbox input</label>
</div>

<div class="form-check form-switch form-switch-xl">
  <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
  <label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
</div>

<div class="form-check form-switch form-switch-xl">
  <input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked" checked>
  <label class="form-check-label" for="flexSwitchCheckChecked">Checked switch checkbox input</label>
</div>
Run Code Online (Sandbox Code Playgroud)

  • 很好的解释。我可以首先回复我的项目。 (2认同)
  • 这应该合并到官方引导程序中。 (2认同)

小智 27

适用于所有引导程序版本

没有额外的 CSS/SCSS

实际上，解决方案非常简单，要么应用自定义 css/scss 来使按钮更大，要么

您可以使用transform: scale();开关上的 css 属性来增加按钮的大小，相信我，这是解决问题的最简单方法，并且它有效。


<div class="form-check form-switch py-5">

  <!-- Size of the default switch will increase 1.8 times -->
  <input class="form-check-input mx-2" 
         type="checkbox" 
         role="switch" 
         id="flexSwitchCheckDefault" 
         style="transform: scale(1.8);">

  <label class="form-check-label" 
         for="flexSwitchCheckDefault" 
         id="AucTu">Autocomplete Turned Off</label>
</div>
Run Code Online (Sandbox Code Playgroud)

附言。您不需要添加自定义 css/scss 只是不要忘记从 switch 添加一些边距，或从 div 添加一些边距（或者其中的某些部分将被隐藏）:)

zem*_*nkh 8

在 bootstrap 4 中，如果你想改变或增加自定义 switch（一个来自 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>
Run Code Online (Sandbox Code Playgroud)

在 boostrap.css（版本 4.3.1 且未缩小）文件中，您应该找到自定义开关类并在下面更改以下参数。你必须删除我添加的所有评论。

.custom-switch {
  padding-left: 2.25rem;
  padding-bottom: 1rem; // added for positioning
}

.custom-control-label { // added for alignment with the switch
  padding-top: 0.5rem;
  padding-left: 2rem;
  padding-bottom: 0.1rem;
}

.custom-switch .custom-control-label::before {
  left: -2.25rem;
  height: 2rem;
  width: 3.5rem;    // it was 1.75rem before. Sliding way is longer than before.
  pointer-events: all;
  border-radius: 1rem;
}

.custom-switch .custom-control-label::after {
  top: calc(0.25rem + 2px);
  left: calc(-2.25rem + 2px);
  width: calc(2rem - 4px);   // it was calc(1rem - 4px) before. Oval is bigger than before.
  height: calc(2rem - 4px);  // it was calc(1rem - 4px) before. Oval is bigger than before.
  background-color: #adb5bd;
  border-radius: 2rem; //   it was 0.5rem before. Oval is bigger than before.
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-transform 0.15s ease-in-out;
  transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-transform 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .custom-switch .custom-control-label::after {
    transition: none;
  }
}

.custom-switch .custom-control-input:checked ~ .custom-control-label::after {
  background-color: #fff;
  -webkit-transform: translateX(1.5rem); //translateX(0.75rem);
  transform: translateX(1.5rem); //translateX(0.75rem);
}
Run Code Online (Sandbox Code Playgroud)

将这些代码复制到 Bootstrap 文件后，必须删除 我输入的所有注释，否则不会增加大小。我希望你现在喜欢你更大的漂亮开关。

alb*_*jan 5

最好拥有自己的文件并更改开关尺寸的 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";
Run Code Online (Sandbox Code Playgroud)

Aur*_*URA 5

在 Bootstrap 5 中，有一个优雅的解决方案可以通过使用框架提供的预定义字体大小类 (fs-x) 来调整复选框的大小。这是代码示例：

<div class="form-check fs-3">
        <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
        <label class="form-check-label" for="flexRadioDefault1">
            Default radio
        </label>
    </div>
    <div class="form-check fs-4">
        <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
        <label class="form-check-label" for="flexRadioDefault1">
            Default radio
        </label>
    </div>
    <div class="form-check fs-5">
        <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
        <label class="form-check-label" for="flexRadioDefault1">
            Default radio
        </label>
    </div>
    <div class="form-check fs-6 mb-3">
        <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
        <label class="form-check-label" for="flexRadioDefault1">
            Default radio
        </label>
    </div>
Run Code Online (Sandbox Code Playgroud)

结果是：

不同大小的复选框

Fro*_*key 4

更改引导程序组件的尺寸不是一个好主意，您应该更改引导程序中的变量，但这意味着重新编译库。无论如何，你想要的都可以这样完成：

.custom-control-label::before ,.custom-control-label::after{width:20px; height:20px}
Run Code Online (Sandbox Code Playgroud)

归档时间：

查看次数：

22464 次

最近记录：

4 年，7 月 前
如何使用CSS设置复选框的样式？ 788
自定义Bootstrap复选框 19
更多相关链接
相关归档
"javascript:void(0)"是什么意思？ 1292
如果屏幕宽度小于960像素,请执行某些操作 207
Angular 2 - 全局CSS文件 50
如何使用JQuery迭代表行并访问一些单元格值？ 49
JavaScript:获取参数值和传递变量的名称 46
你怎么能在IE中翻转网站？(4月1日) 28
不同语言的不同字形选择 24
在Asp.NET中将CSS应用于内容页面 16
如何在移动菜单打开时禁用后台滚动？ 16
Affix在Bootstrap 4(alpha)中不起作用 11
难疑归档
如何解决Git中的合并冲突 4600
如何在Java中读取/转换InputStream为String？ 3864
如何检查列表是否为空？ 3235
我是否施放了malloc的结果？ 2318
你如何断言在JUnit 4测试中抛出某个异常？ 1915
Bower和npm有什么区别？ 1723
如何从文件内容创建Java字符串？ 1440
Git:如何在项目提交历史中找到已删除的文件？ 1183
Pythonic方式创建一个长多行字符串 1160
这是什么意思？"'NSUnknownKeyException',原因:...此类不是键值X的键值编码兼容" 1143