Wie füge ich einen Rand/Abstand zwischen Bootstrap-Spalten hinzu, ohne das Layout zu beschädigen?

Wie füge ich in Bootstrap einen Rand/Abstand zwischen Spalten hinzu?

Beim Entwerfen einer Website mit Bootstrap ist es häufig erforderlich, zusätzlichen Rand oder Abstand zwischen Spalten hinzuzufügen . Bei dem Versuch, dies zu erreichen, sind einige Benutzer auf unbefriedigende Ergebnisse gestoßen.

Eine beliebte Methode besteht darin, die Spaltenklassen mit pull-left oder pull-right in col-md-5 zu ändern. Dieser Ansatz kann jedoch zu große Lücken erzeugen.

Eine effektivere Lösung besteht darin, ein div innerhalb der ursprünglichen col-md-6-Klasse zu verschachteln. Dieses Div kann dann mit dem gewünschten Rand und Abstand gestaltet werden.

Hier ist ein Beispiel:

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

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

Mit dieser Methode können Sie ganz einfach den gewünschten Rand und Abstand hinzufügen zwischen den Spalten, ohne das Spaltenlayout zu beeinträchtigen. Diese Technik bietet Flexibilität und ermöglicht eine präzise Kontrolle über den Abstand zwischen Elementen.

Das obige ist der detaillierte Inhalt vonWie füge ich einen Rand/Abstand zwischen Bootstrap-Spalten hinzu, ohne das Layout zu beschädigen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!