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!

twitter-bootstrap twitter-bootstrap-4 bootstrap-4

— 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

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>

Erweitern Sie das Snippet

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:

Hoffe es hilft dir.

— Jorge Sampayo
quelle

button-size () ist keine gültige Funktion mehr.

— Routhinator

Normalerweise ist es: Haupt-Repo: github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/… Ruby-Repo: github.com/twbs/bootstrap-rubygem/blob/master/assets/…

— 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

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>

Erweitern Sie das Snippet

— John Doe
quelle