Я просто перешел на bootstrap 4, и мои кнопки xs больше не выглядят слишком маленькими!
Глядя на документы для кнопок в bootstrap 4, я не вижу опции для дополнительных маленьких кнопок?
Может ли кто-нибудь подтвердить это для меня?
Благодарю!
Я просто перешел на bootstrap 4, и мои кнопки xs больше не выглядят слишком маленькими!
Глядя на документы для кнопок в bootstrap 4, я не вижу опции для дополнительных маленьких кнопок?
Может ли кто-нибудь подтвердить это для меня?
Благодарю!
@rifton007 опубликовал быстрое исправление в проблеме GitHub на эту тему. Добавьте это в ваш файл CSS:
.btn-group-xs > .btn, .btn-xs {
padding: .25rem .4rem;
font-size: .875rem;
line-height: .5;
border-radius: .2rem;
}
Демо-версия:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<style>
.btn-group-xs > .btn, .btn-xs {
padding: .25rem .4rem;
font-size: .875rem;
line-height: .5;
border-radius: .2rem;
}
</style>
<button class="btn btn-primary btn-xs">♡</button>
<button class="btn btn-primary btn-sm">♡</button>
<button class="btn btn-primary">♡</button>
<button class="btn btn-primary btn-lg">♡</button>
Да, в Bootstrap 4 нет btn-xs
, вам нужно будет создать этот класс самостоятельно. В scss/mixins/_buttons.scss
вы найдете mixin с именем button-size
поэтому в коде SCSS используйте следующий код:
.btn-xs {
// line-height: ensure proper height of button next to extra small input
@include button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius);
}
вам нужно определить свой собственный стиль и переменную xs, которые соответствуют мне лучше всего и приближаются к размеру boottrap 3 btn-xs:
Бутстрап 4 Альфа
$btn-padding-x-xs: .38rem !default;
$btn-padding-y-xs: .18rem !default;
.btn-xs {
@include button-size($btn-padding-y-xs, $btn-padding-x-xs, $font-size-sm, $btn-border-radius-sm);
}
Bootstrap 4 Beta 2
$btn-padding-x-xs: .20rem !default;
$btn-padding-y-xs: .12rem !default;
$input-btn-line-height-xs: 1.1 !default;
.btn.btn-xs {
// line-height: ensure proper height of button next to small input
@include button-size($btn-padding-y-xs, $btn-padding-x-xs, $font-size-sm, $input-btn-line-height-xs, $btn-border-radius-sm);
}
Я добавил это, поскольку Басс Яссен предложил:
.btn-xs
+button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $line-height, $border-radius)
Используя _variables.scss
Bootstrap, и это было результатом:
Надеюсь, это поможет вам.