Есть ли способ изменить размер флажка Bootstraps 4 beta на более крупный?
Я почти попытался изменить стили, но это не сработало.
Спасибо!
Есть ли способ изменить размер флажка Bootstraps 4 beta на более крупный?
Я почти попытался изменить стили, но это не сработало.
Спасибо!
В настоящее время проблема с этим, и я сообщил об этом в 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>
Для пользователей 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>
Я подошел к этому немного по-другому. Добавьте следующее в пользовательский 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"
Если вы импортируете de scss из Bootstrap, вы можете переопределить переменную $custom-control-indicator-size
pointer $custom-control-indicator-size
.
$custom-control-indicator-size: 1.75rem;