Wie entferne ich Bootstrap-Spaltenrinnen ohne negative Ränder?

Spaltenstege in Bootstrap eliminieren, ohne negative Ränder zu verwenden

Problem:

So entfernen Sie den standardmäßigen 30-Pixel-Abstand zwischen Spalten in Bootstrap, ohne auf eine negative Einstellung zurückzugreifen Ränder?

Lösung:

Abhängig von Ihrer Bootstrap-Version sind hier die empfohlenen Ansätze:

Bootstrap 5:

• Neuer Ansatz: Nutzen Sie die .g-0 Klasse zum Entfernen von Zwischenräumen innerhalb der .row.
• Zeilenzwischenräume: Verbessern Sie die Reaktionsfähigkeit, indem Sie Zwischenraumklassen anwenden, die für bestimmte Haltepunkte entwickelt wurden (z. B. .gx-sm-4 für horizontale Zwischenräume auf kleinen Bildschirmen). .

Bootstrap 4:

• Vereinfacht: Implementieren Sie die .no-gutters-Klasse direkt in der .row.
• Codebeispiel:

<div class="row no-gutters">
    <div class="col">x</div>
    <div class="col">x</div>
    <div class="col">x</div>
</div>

Bootstrap 3.4.0 :

• Klassenbasiert: Verwenden Sie die neu eingeführte .row-no-gutters-Klasse.

Bootstrap 3 , <= 3.3.9:

• Padding-Anpassung: Ändern Sie den Abstand innerhalb der Spalten und fügen Sie der .row eine benutzerdefinierte .no-gutter-Klasse hinzu.
• CSS-Code:

.no-gutter {
  margin-right: 0;
  margin-left: 0;
}

.no-gutter > [class*="col-"] {
  padding-right: 0;
  padding-left: 0;
}
Das obige ist der detaillierte Inhalt vonWie entferne ich Bootstrap-Spaltenrinnen ohne negative Ränder?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!