更改Bootstrap 4复选框大小

Question

有没有办法将Bootstraps 4 beta复选框大小更改为更大的？

我几乎尝试改变风格,但这不起作用.

谢谢!

Answer 1

目前有一个问题,我向Bootstrap报告了它.在修复之前,请执行以下操作:

首先,使用该form-control-lg课程.一旦问题得到解决,使用该课程将是您所需要的.

在问题得到解决之前,请添加以下css:

.custom-control-label::before, 
.custom-control-label::after {
    top: .8rem;
    width: 1.25rem;
    height: 1.25rem;
}

这是一个完整的工作代码示例:

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

<style>
.custom-control-label::before, 
.custom-control-label::after {
top: .8rem;
width: 1.25rem;
height: 1.25rem;
}
</style>


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

Answer 2

对于Bootstrap 4.2.1用户，这就是我如何使其工作的方式。

我介绍了一个新的类custom-control-lg来处理它。

.custom-control-lg .custom-control-label::before,
.custom-control-lg .custom-control-label::after {
    top: 0.1rem !important;
    left: -2rem !important;
    width: 1.25rem !important;
    height: 1.25rem !important;
}

.custom-control-lg .custom-control-label {
    margin-left: 0.5rem !important;
    font-size: 1rem !important;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="card m-3">
<div class="card-body">
    <div class="custom-control-lg custom-control custom-checkbox">
        <input class="custom-control-input" id="checkbox-large" type="checkbox"/>
        <label class="custom-control-label" for="checkbox-large">
            Checkbox label for large input!
        </label>
    </div>
    <div class="custom-control custom-checkbox">
        <input class="custom-control-input" id="checkbox-small" type="checkbox"/>
        <label class="custom-control-label" for="checkbox-small">
            Checkbox label for small input!
        </label>
    </div>
</div>
</div>

Answer 3

我对此的处理方式有所不同。将以下内容添加到自定义CSS。

.checkbox-1x {
    transform: scale(1.5);
    -webkit-transform: scale(1.5);
}
.checkbox-2x {
    transform: scale(2);
    -webkit-transform: scale(2);
}

然后像这样编写输入：input type =“ checkbox” class =“ checkbox-1x”

Answer 4

如果从 Bootstrap 导入 de scss，则可以覆盖变量$custom-control-indicator-size。

$custom-control-indicator-size: 1.75rem;