Wie kann ich zusätzlichen Abstand zwischen Bootstrap-Rasterspalten hinzufügen?

Mit Bootstrap zusätzlichen Abstand zwischen Rasterspalten schaffen

Das Hinzufügen von zusätzlichem Rand und Füllraum zwischen Spalten in einem Bootstrap-Rasterlayout kann die visuelle Attraktivität verbessern Ihrer Website. Die Verwendung von „pull-left“ und „pull-right“ mit modifizierten col-md-5-Klassen kann zwar eine Option sein, kann jedoch zu übermäßigen Lücken führen.

Eine elegantere Lösung besteht darin, in jeder Spalte ein verschachteltes Div zu erstellen und anzuwenden die gewünschte Polsterung darauf. Dieser Ansatz bewahrt die Spaltenstruktur und ermöglicht gleichzeitig zusätzlichen Platz.

Code-Implementierung

Beachten Sie den folgenden geänderten HTML-Code:

<code class="html"><div class="row">
    <div class="text-center col-md-6">
        <div class="classWithPad">Widget 1</div>
    </div>
    <div class="text-center col-md-6">
        <div class="classWithPad">Widget 2</div>
    </div>
</div></code>

CSS-Stile

Um den gewünschten Rand und Abstand anzuwenden, fügen Sie das folgende CSS hinzu:

<code class="css">.classWithPad {
    margin: 10px;
    padding: 10px;
}</code>

Durch die Implementierung dieser Methode können Sie effektiv zusätzlichen Abstand zwischen Ihren Rasterspalten hinzufügen Wahrung der Integrität Ihres Layouts.

Das obige ist der detaillierte Inhalt vonWie kann ich zusätzlichen Abstand zwischen Bootstrap-Rasterspalten hinzufügen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!