Wie füge ich einen Abstand zwischen Spalten im Bootstrap-Rasterlayout hinzu?

Abstände zwischen Spalten im Bootstrap-Rasterlayout

Das Hinzufügen von Rändern oder Auffüllungen, um in Bootstrap Platz zwischen Spalten zu schaffen, kann schwierig sein. Um dies zu erreichen, ohne die Spaltenausrichtung zu beeinträchtigen, führen Sie die folgenden Schritte aus:

Erstellen Sie ein inneres Div innerhalb der Spalte

Erstellen Sie ein Div innerhalb des col-md-6-Elements und wenden Sie es an den gewünschten Rand und die Polsterung dazu. Dieses Div dient als Rückgrat der Spalte und sorgt gleichzeitig für den nötigen Abstand.

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

Benutzerdefiniertes Styling hinzufügen

Wenden Sie in Ihrem CSS den gewünschten Rand und Abstand an zum inneren div.

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

Mit diesem Ansatz können Sie den Abstand zwischen Spalten einfach anpassen, ohne die Integrität des Bootstrap-Rasterlayouts zu beeinträchtigen.

Das obige ist der detaillierte Inhalt vonWie füge ich einen Abstand zwischen Spalten im Bootstrap-Rasterlayout hinzu?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!