Vertikaler Raum beim Stapeln von Spalten in Bootstrap 3

68

Wenn Spalten im mobilen Modus gestapelt werden, möchte ich einen vertikalen Abstand zwischen den Spalteninhalten. Wie kann ich das tun?

Siehe jsfiddle unter http://jsfiddle.net/tofutim/3sWEN/ und variieren Sie die Breite der Ausgabe. Vor dem zweiten Lorem ipsum sollte ein gewisser Abstand bestehen.

Geben Sie hier die Bildbeschreibung ein

<div class="container">
    <div class="well well-lg" style="margin:10px">
    <div class="row">
        <div class="col-sm-6">
            <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."</p>
            <form>               
                <input type="textbox" class="form-control" placeholder="Username"></input>
                <input type="password" class="form-control" placeholder="Password"></input>                     
            </form>
        </div>
        <div class="col-sm-6">
            <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."</p>
            <form role="form">
                <div class="form-group">  
                    <button class="form-control btn btn-default">Push me</button>
                <input type="textbox" class="form-control" placeholder="Username"></input>
                <input type="password" class="form-control" placeholder="Password"></input>            
                </div>
            </form>
        </div>
    </div>
    </div>
</div>
tofutim
quelle

Antworten:

63

Ein Weg wäre mit CSS, das col-*bei kleineren Geräten / Breiten den unteren Rand erhöht.

@media (max-width: 768px) {

  [class*="col-"] {
      margin-bottom: 15px;
  }

}

Eine andere Möglichkeit besteht darin, eine hinzuzufügen div, die nur auf kleineren Geräten / Breiten sichtbar ist.

 <div class="col-sm-6">
    <div class="hidden-lg hidden-md hidden-sm">&nbsp;</div>
        ...

Demo: http://bootply.com/92276


Update 2019

Bootstrap 4 verfügt jetzt über Abstandsdienstprogramme , die verwendet werden können.

Siehe auch: Hinzufügen eines Abstands zwischen vertikal gestapelten Spalten in Bootstrap 4

Zim
quelle
Fügt das am Ende der letzten Spalte einen zusätzlichen Rand hinzu?
Tofutim
1
Ja, die CSS-Lösung funktioniert. Es kann eine Möglichkeit geben, einen Pseudo-Selektor zu verwenden, um das letzte Kind auf Rand 0 zu setzen.
Zim
1
Falls der letzte Spaltenrand nicht gewünscht wird, können Sie diese :not(:last-child)[class*="col-"]:not(:last-child){ margin-bottom: 15px; }
Auswahlkombination
3
Hier ist eine kürzere HTML-Spacer-Lösung, die zwischen Spalten steht. <div class="visible-xs-block form-group"></div>Sie hat eine geringere Höhe als ein normaler Text-Div und sah für mich natürlicher aus.
Duvrai
47

Verwenden Sie .form-groupfür die Spalten

Das ist der Bootstrap-Weg. Andere erwähnte CSS-Hacks funktionieren möglicherweise, sind jedoch nicht der beabsichtigte Weg, um das zu erreichen, was Sie wollen. Das Hacken von Bootstraps-CSS kann später zu mehr Arbeit führen, wenn Sie Ihre Bootstrap-Version ändern.

Bootply-Beispiel: http://www.bootply.com/4cXfQkTCAm#

S ..
quelle
8
Up-Voting dies, weil es Bootstrap Weg ist
Splendonia
5
Aber es wird nicht nur beim Stapeln, sondern immer angezeigt, und das ist nicht das, wonach OP gefragt hat.
Furgas
14

Ich wollte, dass es funktioniert, wenn meine Spalten mit weniger als 991 Pixel gestapelt sind und alle außer dem ersten Kind betreffen, also habe ich es gesetzt

@media (max-width: 991px) { 
  [class*="col-"]:not(:first-child){
      margin-top: 40px;
  }
}
Tom
quelle
1
Aber checkout @ Sams Antwort unten! Die Bootstrap-Methode hierfür ist die Verwendung von .form-group für die Spalten. Diese CSS-Hacks können in zukünftigen Versionen von Bootstrap zu Problemen führen.
Digs
9

Ein einfacher Bootstrap4, kein zusätzliches CSS, Hacks oder Mixin-Lösung wäre so etwas wie:

<div class="row">
    <div class="col-md-3 mb-3 mb-md-0">
    ....
    </div>
    <div class="col-md-9 mb-3 mb-md-0">
    ....
    </div>
</div>

Dies fügt einen Rand-Boden (mb-3) hinzu, setzt ihn jedoch auf Null, wenn er nicht gestapelt ist (mb-md-0).

Da Medienabfragen für Abstandsdienstprogramme wie "mb-3" für "alles über" (Mindestbreite) gelten, müssen Sie das Gegenteil tun und es auf 0 (mb-XX-0) zurücksetzen, wenn es nicht gestapelt ist. In diesem Fall setzen wir es auf "md" (sm), also setzen wir den Rand 0 an diesem Haltepunkt.

Hier ist eine Gabelung Ihrer jsfiddle, die den Rand nur auf Mobilgeräten enthält. Die Stile "mb-3 mb-md-0" in Spalten zeigen die vorgeschlagene Lösung. (Jsfiddle-Version hier: http://jsfiddle.net/cb9oc064/10/ )

@import url('https://getbootstrap.com/dist/css/bootstrap.css');
<div class="container">
    <div class="well well-lg" style="margin:10px">
    <div class="row">
        <div class="col-sm-6 mb-3 mb-md-0">
            <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."</p>
            <form>   
            <div class="form-group"> 
                <input type="textbox" class="form-control " placeholder="Username"></input>
                </div>    
                <div class="form-group"> 
                <input type="password" class="form-control " placeholder="Password"></input>   
                </div>
            </form>
        </div>
        <div class="col-sm-6 mb-3 mb-md-0">
            <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."</p>
            <form role="form">
                <div class="form-group">  
                    <button class="form-control btn btn-default">Push me</button>
                <input type="textbox" class="form-control" placeholder="Username"></input>
                </div>
                <div class="form-group mb-3 ">
                <input type="password" class="form-control" placeholder="Password"></input>            
                </div>
            </form>
        </div>
    </div>
    </div>
</div>

tahiche
quelle
0

Schauen Sie sich dieses Beispiel an: http://getbootstrap.com/examples/carousel/ Beim Stapeln Zwischen dem Text und dem 500 * 500-Bild befindet sich ein Rand. Dies liegt daran, dass der Text <p>um ihn herum ist und der untere Rand 20px beträgt

Natan Rubinstein
quelle
0

Fügen Sie jeder Zeile einen negativen oberen Rand hinzu und kontern Sie diesen Rand in jeder Spalte wie folgt:

.row {
  margin-top: -10px;
}
[class^='col'], [class*=' col'] {
  margin-top: 10px;
}

Nachdem die Spalten gestapelt wurden, erhalten sie den vertikalen Rand zwischen ihnen.

Funktioniert auf allen Bildschirmgrößen.

jsruok
quelle
1
Alternativ können Sie den Selektor umschreiben als*[class^=col]
Nick Kamer
Wahr! Danke @Ziao!
Jsruok
-1

Versuchen Sie, span anstelle von div mit Bootstrap-Klassen zu verwenden.

Vikash Singh
quelle