BTN-XS keine gültige Option mehr in Bootstrap 4?

73

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!

Dragan
quelle
Wie Sie aus den angegebenen Text & Tabellen und wenn Sie die überprüfen Quelle , nee.
Vanburen
1
@vanburen, ich denke, ich kann einfach meine eigene CSS-Klasse namens .btn-xs schreiben, dann ja
Dragan

Antworten:

86

@ 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

aloisdg wechselt zu codidact.com
quelle
6
+1 für das Verweisen auf den Original- Quelllink und das Erteilen von Rifton007 . Im Source-Link machte Squadwuschel einen hervorragenden Punkt darüber, wie nicht jeder von uns reaktionsschnelle mobile Apps schreibt und wie man manchmal nur einen Button in ein Grid für ein Desktop-Erlebnis einfügen möchte, das nicht jede Zeile, in der es sich befindet, überdehnt .
MikeTeeVee
.btn-group-xs> .btn, .btn-xs {padding: 0.40rem .4rem; Schriftgröße: .775rem; Zeilenhöhe: .5; Randradius: .2rem; }
Project Mayhem
1
Ja, wie @MikeTeeVee sagte: "Manchmal möchten Sie einfach eine Schaltfläche in ein Raster einfügen, um eine Desktop-Erfahrung zu erzielen, die nicht jede Zeile, in der sie sich befindet, überdehnt." Das ist der große. Was dachten sie?
immer,
13

Ja, btn-xsin Bootstrap 4 gibt es kein Nein . Sie müssen diese Klasse selbst erstellen. In dem scss/mixins/_buttons.scssfinden Sie das button-sizeso 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);
}
Bass Jobsen
quelle
3
Können Sie CSS bereitstellen?
StallingOne
button-size () ist keine gültige Funktion mehr.
Routhinator
Die Größe der Schaltflächen ist weiterhin gültig: github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/…
Jorge Sampayo
12

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);
}
Squadwuschel
quelle
Es gibt ein neues $line-heightArgument (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);
voidstate
Können Sie CSS bereitstellen?
StallingOne
button-size () ist keine gültige Funktion mehr.
Routhinator
Die Größe der Schaltflächen ist weiterhin gültig: github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/…
Jorge Sampayo
Ja, das habe ich ein paar Stunden später gemerkt. Sollte die Antwort aktualisieren, um zu erwähnen, dass das Mixin manuell geladen werden muss, bevor Ihre Vars funktionieren.
Routhinator
4

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.scssvon Bootstrap und dies war das Ergebnis:

btn-xs

Hoffe es hilft dir.

Jorge Sampayo
quelle
button-size () ist keine gültige Funktion mehr.
Routhinator
Ja, das habe ich ein paar Stunden später gemerkt. Sollte die Antwort aktualisieren, um zu erwähnen, dass das Mixin manuell geladen werden muss, bevor Ihre Vars funktionieren.
Routhinator
2

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.

Rushikesh Shelke
quelle
1

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>

John Doe
quelle