gleichen Raum vertikal und horizontal zwischen den Spalten

Question

Im Bootstap Gitter verwenden und in kleinen Geräten habe ich zwei Spalten mit einem Standard-Bootstrap-Raum zwischen. Weißt du, wie man dem unteren Rand denselben Raum gibt, so dass die Spalten den gleichen Abstand zwischen vertikal und horizontal haben?

Darunter ist das Beispiel, ohne Margin-Bottom, wissen Sie, wie Sie einen Rand-unten oder oben gleich dem horizontalen Rand zwischen den Spalten geben?

https://jsfiddle.net/wa1cjfn6/

html:

<div class="HomeEvents"> 
    <div class="container"> 
    <div class="row"> 
     <div class="col-sm-6"> 
     <div class="content"> 
     <h1> 
     text 
     </h1> 
     </div> 
     </div> 
     <div class="col-sm-6"> 
     <div class="content"> 
     <h1> 
     text 
     </h1> 
     </div> 
     </div> 
     <div class="col-sm-6"> 
     <div class="content"> 
     <h1> 
     Text 
     </h1> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

css:

.content{ 
    border:1px solid red; 
    margin-top:15px; 
} 

Answer 1

Bootstrap-Säulen sind mit padding-left: 15px; padding-right: 15px gestylt. Daher haben Sie zwischen zwei Spalten 30px.

Im forked demo Ihre Geige sehen Sie, ich hinzugefügt padding-bottom: 30px; zum .col-sm-6 Klasse, so dass der Raum auf dem Boden in den Raum zwischen den beiden Spalten entspricht.

Solange die Spalten die gleiche Höhe haben, haben Sie ein gleichmäßiges Layout.

Answer 2

@JonD, Bootstrap 4 hat Abstand Utility-Klassen, die Sie Ihren Markup anwenden können, die mit dem Hinzufügen von Rand helfen und Padding zu Markup, ohne in den meisten Fällen CSS zu schreiben. Hier finden Sie eine link für die Dienstprogrammklassen für den Abstand für weitere Informationen. In diesem Fall können Sie die mt-5 Klasse auf der letzten Div mit Ihrer content Klasse verwenden. um das gewünschte Ergebnis zu erhalten. Sehen Sie dieses codeply project für seine Implementierung.