Vertikaler Raum beim Stapeln von Spalten in Bootstrap 3

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.

<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>

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

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#

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;
  }
}

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>

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

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.

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