Halten Sie beim Wickeln etwas vertikalen Abstand zwischen den Elementen?

Lesezeit: 4 Minuten

Benutzeravatar von RocketNuts
RucolaNüsse

Verwenden Bootstrapwenn ich eine Reihe von Elementen (z buttons) in einer Reihe und verkleinern Sie das Fenster, die Elemente wickeln sich um.

Aber während zwischen den Elementen ein gewisser horizontaler Abstand ist, wenn das Fenster breit genug ist, um alles nebeneinander aufzunehmen, bleibt vertikal alles zusammenkleben, mit null Pixeln Leerraum dazwischen.

Live-Beispiel (verengen oder erweitern Sie das Ausgabefenster, um den Effekt zu sehen)

Screenshot-Beispiel:
1. Weit genug, beachten Sie den Abstand zwischen den Tasten

2. Beachten Sie beim Umwickeln KEINEN Abstand zwischen den übereinander gestapelten Knöpfen

Ich denke, ich könnte mit benutzerdefiniertem CSS herumspielen, vertikale Ränder hinzufügen oder so, aber um die Dinge so kompatibel und standardisiert wie möglich zu halten, frage ich mich, ob es eine bessere oder nativere Möglichkeit gibt, dies in einem Bootstrap-Layout zu beheben?

  • Duplikat: stackoverflow.com/questions/17809671/… stackoverflow.com/questions/21981117/… stackoverflow.com/questions/18918921/…

    – Topf

    29. April 2015 um 7:59 Uhr


Benutzeravatar von Shanaka
Shanaka

Was hier passiert, ist, dass die Schaltflächen als Inline-Block angezeigt werden und solche Elemente standardmäßig keinen Leerraum oder Rand haben. Sie können die folgende Methode verwenden, um dies zu vermeiden.

Was ich getan habe, ist, dem übergeordneten Element der Schaltflächen eine Klasse hinzuzufügen und den Stil an die Klasse “btn” zu erben.

html

<div class="container">
    <div class="row">
        <div class="col-xs-12 button-wrapper">
            <button class="btn btn-primary">Lorem ipsum dolor sit amet</button>
            <button class="btn btn-info">consectetur adipiscing elit</button>
            <button class="btn btn-success">sed do eiusmod tempor incididunt</button>
        </div>
    </div>
</div>

css

.button-wrapper .btn {
    margin-bottom:5px;
}

Demo

  • Dies hat auch auf Bildschirmen, die breit genug sind, um die Schaltflächen in einer Zeile anzuzeigen, genügend Spielraum. Mit dieser Antwort vermeiden Sie das – stackoverflow.com/questions/30887071/…

    – Tahsis Claus

    23. März 2017 um 21:40 Uhr


Mit Bootstrap mache ich immer gerne Klassen zum Hinzufügen von oberen und unteren Rändern wie folgt:

.top5 { margin-top:5px; }
.top7 { margin-top:7px; }
.top10 { margin-top:10px; }
.top15 { margin-top:15px; }
.top17 { margin-top:17px; }
.top30 { margin-top:30px; }

.bottom5 { margin-bottom:5px; }
.bottom7 { margin-bottom:7px; }
.bottom10 { margin-bottom:10px; }
.bottom15 { margin-bottom:15px; }
.bottom17 { margin-bottom:17px; }
.bottom30 { margin-bottom:30px; }

Es ist leicht zu merken und ist eine schnelle Lösung für dieses Problem. Fügen Sie einfach zu Ihrer main.css-Datei hinzu.

  • Hat bei mir nicht funktioniert. Möglicherweise funktionieren diese Klassen aufgrund von Float- oder Anzeigeeinstellungen nicht in Kombination mit bestimmten Bootstrap-Klassen. Aber ich habe eine ähnliche Alternative gefunden, siehe meine Lösung

    – Roland

    30. August 2017 um 13:55 Uhr

Versuchen Sie es so: Demo

CSS:

 @media (max-width: 779px) {
     .btn{
         margin-bottom:10px;
 }

  • Funktioniert für mich und keine Anpassung von HTML.

    – Abella

    31. Dezember 2016 um 6:05 Uhr

  • Ja, das scheint mir irgendwie nervig, aber ich denke, das ist die beste Lösung, die ich bisher gesehen habe. Wäre sinnvoll, wenn Bootstrap einige Klassen hätte, die nur basierend auf unterschiedlichen Größen für Ränder und Dinge aktiviert werden (wie z mt-sm-10, mb-md-20, etc). Ich frage mich, ob diese es wert sind, hinzugefügt zu werden?

    – Benutzer1274820

    8. November 2018 um 16:40 Uhr


Überprüf den Beispiel unter:

Code:

.btn {
    margin: 10px auto;
}
<div class="container">
	<div class="row">
        
        <div class="col-xs-12 col-sm-4">
            <button class="btn btn-block btn-primary">Lorem ipsum dolor sit amet</button>
        </div>
        
        <div class="col-xs-12 col-sm-4">
            <button class="btn btn-block btn-info">consectetur adipiscing elit</button>
        </div>
        
        <div class="col-xs-12 col-sm-4">
            <button class="btn btn-block btn-success">sed do eiusmod tempor incididunt</button>
        </div>        
        
	</div>
</div>

Beispiel

Ich verwende diese Methode: füge ein div mit etwas vertikalem Abstand hinzu:

<div class="vspace1em"></div>

CSS:

    div.vspace1em {
        clear: both;
        height: 1em;
    }

  • Diese Lösung ist viel sauberer als das Hinzufügen von Rändern zu Bootstrap-Elementen.

    – jahackbeth

    31. August 2017 um 4:20 Uhr

Benutzeravatar von ItzMe_Ezhil
ItzMe_Ezhil

Demo
Verwenden Sie Margin-bottom CSS für Button.

    .btn{margin-bottom:10px;}

Sie können dieses CSS mit einem neuen übergeordneten Klassennamen schreiben, um die oben genannten CSS-Auswirkungen auf anderen Seiten zu vermeiden.

  • Diese Lösung ist viel sauberer als das Hinzufügen von Rändern zu Bootstrap-Elementen.

    – jahackbeth

    31. August 2017 um 4:20 Uhr

1430000cookie-checkHalten Sie beim Wickeln etwas vertikalen Abstand zwischen den Elementen?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy