wake-up-neo.net

(Bootstrap) Einen kleinen Abstand zwischen den Elementen einhalten, wenn sie umbrochen werden?

Wenn ich mit Bootstrap eine Reihe von Elementen (z. B. Schaltflächen) in eine Reihe stelle und das Fenster verkleinere, werden die Elemente umbrochen. 

Zwar gibt es einen horizontalen Abstand zwischen den Elementen, wenn das Fenster groß genug ist, um alles nebeneinander aufzunehmen, aber vertikal bleibt alles zusammen, mit einem Abstand von null Pixeln.

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

Screenshot Beispiel:
1. Breit genug, beachte den Abstand zwischen den Tasten
2. Beim Umwickeln bemerken Sie KEINEN Raum zwischen den aufeinander gestapelten Knöpfen

Ich schätze, ich könnte mich mit ein wenig benutzerdefiniertem CSS herumschlagen, vertikale Ränder hinzufügen oder so weiter, 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.

16
RocketNuts

Was hier passiert, ist, dass die Schaltflächen als Inline-Block angezeigt werden. Standardmäßig haben solche Elemente zunächst keine Leerzeichen oder Ränder. Sie können die unten stehende Methode verwenden, um dies zu vermeiden. 

Was ich getan habe, ist eine Klasse zum übergeordneten Element der Schaltflächen hinzugefügt und den Stil der 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

22
Shanaka

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 Ihre main.css-Datei hinzu.

12
Millsionaire

Versuchen Sie es wie folgt: Demo

CSS:

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

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

    .btn{margin-bottom:10px;}

Sie können diese CSS mit dem neuen Namen der übergeordneten Klasse schreiben, um zu vermeiden, dass sich der CSS-Code auf anderen Seiten auswirkt.

Überprüfen Sie das example unten:

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

3
biplob

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

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

css:

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