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>
:not(:last-child)
[class*="col-"]:not(:last-child){ margin-bottom: 15px; }
<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.Verwenden Sie
.form-group
für die SpaltenDas 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#
quelle
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; } }
quelle
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>
quelle
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ägtquelle
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.
quelle
*[class^=col]
Versuchen Sie, span anstelle von div mit Bootstrap-Klassen zu verwenden.
quelle