Ich bin gerade auf Bootstrap 4 migriert und meine xs-Schaltflächen scheinen nicht mehr extra klein zu sein!
Wenn Sie in den Dokumenten nach Schaltflächen in Bootstrap 4 suchen, wird die Option für besonders kleine Schaltflächen nicht angezeigt.
Kann mir das jemand bestätigen?
Vielen Dank!
Antworten:
@ rifton007 hat eine schnelle Lösung im GitHub-Problem zu diesem Thema veröffentlicht. Fügen Sie dies in Ihre CSS-Datei ein:
.btn-group-xs > .btn, .btn-xs { padding: .25rem .4rem; font-size: .875rem; line-height: .5; border-radius: .2rem; }
Demo:
<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>
Quelle
quelle
Ja,
btn-xs
in Bootstrap 4 gibt es kein Nein . Sie müssen diese Klasse selbst erstellen. In demscss/mixins/_buttons.scss
finden Sie dasbutton-size
so genannte Mixin in Ihrem SCSS-Code. Verwenden Sie den folgenden Code:.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); }
quelle
Sie müssen Ihren eigenen xs-Stil und Ihre eigene Variable definieren. Dies passt am besten zu mir und kommt der Größe des Bootstraps 3 btn-xs nahe:
Bootstrap 4 Alpha
$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); }
quelle
$line-height
Argument (in Beta 2) . Verwenden Sie jetzt:@include button-size($btn-padding-y-xs, $btn-padding-x-xs, $font-size-sm, $input-btn-line-height-sm, $btn-border-radius-sm);
Ich habe dies hinzugefügt, wie Bass Jobsen vorgeschlagen hat:
.btn-xs +button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $line-height, $border-radius)
Verwenden Sie die Standardeinstellung
_variables.scss
von Bootstrap und dies war das Ergebnis:Hoffe es hilft dir.
quelle
In Bootstrap 4 ist die Option eines extra kleinen Knopfes nicht mehr verfügbar. Es stehen nur 3 Größen zur Verfügung: groß, normal, klein.
quelle
Ich habe CSS aus der alten Version von Bootstrap extrahiert. Sie können den unten genannten CSS-Stil in Ihrem benutzerdefinierten Stylesheet verwenden. Mit Hilfe der Klasse btn-xs können Sie den alten Stil für Ihre Schaltfläche verwenden.
Viel Glück.
button { margin-top: 10px; margin-left: 10px; } .btn-xs { padding: 1px 5px !important; font-size: 12px !important; line-height: 1.5 !important; border-radius: 3px !important; }
<link rel="stylesheet" href="https://v4-alpha.getbootstrap.com/dist/css/bootstrap.min.css"> <button class="btn btn-primary btn-xs">This is Small Button</button>
quelle