20

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

<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>

我想知道如何使复选框比现在大？我尝试编辑 csscustomCheck并更改 height 和 width 属性，但这不会增加框的大小。

4

11 回答 11

42

我添加了诸如引导开关之类*-sm, *-md, *-lg, *-xl的类。

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

对于引导程序 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));
}
<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>

对于引导程序 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;
}
<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>

于 2020-04-01T11:10:25.240 回答
9

在 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>

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

.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);
}

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

于 2019-06-14T09:05:46.593 回答
6

适用于所有自举版本

没有额外的 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>

PS。您不需要添加自定义 css/scss 只是不要忘记从开关添加一些边距，或从 div 填充（或其中一部分将被隐藏）:)

于 2021-10-20T17:09:46.323 回答
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";
于 2020-01-21T10:09:45.020 回答
4

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

.custom-control-label::before ,.custom-control-label::after{width:20px; height:20px}
于 2019-04-09T12:51:49.820 回答
3

此类.custom-switch-adaptive将使开关适应文本大小并在其中包含标签文本。

演示

PS Bootstrap v5 中会加入类似的功能

在此处输入图像描述

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>
于 2020-01-28T13:37:51.917 回答
1

引导程序 5

我重新设计了 Nisarg Shah 的 css，使 Text 现在与 Bootstrap V5 示例的开关很好地对齐。因此，我查看了 Bootstrap 5 css 源并增加了所有似乎涉及到大小调整的属性：padding-left、hight、margin-left和. 我认为结果看起来更好，并且与默认的开关外观样式一致。widthpadding-top

CSS 和 HTML： 

.form-switch.form-switch-md {
    padding-left: 4.5em;
    height: 2.5em;
}

.form-switch.form-switch-md .form-check-input {
    margin-left: -4.5em;
    height: 2em;
    width: 4em;
}

.form-switch.form-switch-md .form-check-label {
    padding-top: 0.5em;
}

.form-switch.form-switch-lg {
    padding-left: 8.5em;
    height: 4.5em;
}

.form-switch.form-switch-lg .form-check-input {
    margin-left: -8.5em;
    height: 4em;
    width: 8em;
}

.form-switch.form-switch-lg .form-check-label {
    padding-top: 1.5em;
}
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
  <label class="form-check-label" for="flexSwitchCheckDefault">Original switch unchecked</label>
</div>

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked" checked>
  <label class="form-check-label" for="flexSwitchCheckChecked">Original switch checked</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">Medium switch unchecked</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">Medium switch checked</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">Large switch unchecked</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">Large switch checked</label>
</div>

于 2021-03-14T18:03:56.723 回答
0

由于您试图在引导程序中完成它，因此很容易。首先添加一个 div 容器，btn-group-toggle以便在组中使用按钮（如果你愿意的话。）。

在标签中添加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>
于 2019-04-09T12:51:58.643 回答
0

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

.custom-checkbox-lg .custom-control-label::before,
.custom-checkbox-lg .custom-control-label::after {
  width: 2rem;
  height: 2rem;
}

.custom-checkbox-lg .custom-control-label {
  margin: .5rem 1rem;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

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

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

于 2019-04-09T12:56:20.700 回答
0

您可以尝试以下方法：

.custom-control-label::before, 
.custom-control-label::after {
  width: 2.25rem !important;
  height: 2.25rem !important;
  margin: 1rem;
}
.custom-control-label{
  margin: 1.5rem 2rem;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">


<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>

于 2019-04-09T13:04:30.590 回答
0

在寻找相同问题的解决方案时发现了这一点，但以前的答案对我来说都不是很好，尤其是当有一个带有复选框/开关的标签时。

开始使用边距和行高，但似乎解决方案可能比这简单得多 - 至少在 Bootstrap V5 中，所有大小和边距都是相对设置的"em"，因此更改基本元素上的字体大小会form-check调整大小并很好地对齐所有内容，有或没有标签。

编辑：刚刚注意到没有标签时底部边距有点偏离，但可以通过添加空标签或根据需要手动调整边距/填充来轻松修复。

.form-check-lg {
  font-size: 150%;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>

<h3>default font size:</h3>
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="checkbox_1">
  <label class="form-check-label" for="checkbox_1">default</label>
</div>
<div class="form-check"><input class="form-check-input" type="checkbox" id="checkbox_2">
  <label class="form-check-label" for="checkbox_2">default</label>
</div>
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox">
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox">
</div>

<h3>larger font size:</h3>
<div class="form-check form-switch form-check-lg">
  <input class="form-check-input" type="checkbox" id="checkbox_3">
  <label class="form-check-label" for="checkbox_3">large</label>
</div>
<div class="form-check form-check-lg">
  <input class="form-check-input" type="checkbox" id="checkbox_4">
  <label class="form-check-label" for="checkbox_4">large</label>
</div>
<div class="form-check form-switch form-check-lg">
  <input class="form-check-input" type="checkbox">
</div>
<div class="form-check form-check-lg">
  <input class="form-check-input" type="checkbox">
</div>

于 2021-10-31T12:12:04.783 回答