Wie steuere ich Ränder und Abstand zwischen Spalten in Bootstrap?

Ränder und Abstand in Spalten mit Bootstrap verwalten

Beim Arbeiten mit dem Rasterlayout von Bootstrap kann es wünschenswert sein, den Abstand zwischen Spalten anzupassen. Dies kann durch die Einbeziehung zusätzlicher Ränder und Auffüllungen erreicht werden.

Ein gängiger Ansatz besteht darin, die Klassen der Spalten zu ändern, indem Optionen wie col-md-5 mit pull-left und pull-right verwendet werden. Diese Technik kann jedoch zu übermäßigen Abständen führen.

Eine alternative Lösung besteht darin, in jeder col-md-6-Spalte ein verschachteltes div-Element zu erstellen. Das Rückgrat der Spalte bleibt erhalten, während dem verschachtelten Div der gewünschte Rand und Abstand zugewiesen werden kann.

Beispiel:

HTML:

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

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

Dieser Ansatz ermöglicht eine präzise Kontrolle über den Abstand zwischen Spalten, ohne das Rasterlayout zu beeinträchtigen.

Das obige ist der detaillierte Inhalt vonWie steuere ich Ränder und Abstand zwischen Spalten in Bootstrap?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!