Wie kann der Stegabstand zwischen Bootstrap-Spalten beseitigt werden?

So entfernen Sie den Bundstegabstand zwischen Spalten in Bootstrap

Der Abstand zwischen Spalten in Bootstrap kann zu einem optisch überladenen Erscheinungsbild führen, wenn dies unerwünscht ist. So entfernen Sie diesen Zwischenraum, ohne einzelne Ränder festzulegen:

Bootstrap 5 und höher

In Bootstrap 5 wurde die Klasse .no-gutters durch .g ersetzt -0. Sie können es auf dem .row-Element verwenden, um alle Abstände zwischen Spalten zu entfernen:

<div class="row g-0">
  <div class="col">...</div>
  <div class="col">...</div>
  <div class="col">...</div>
</div>

Bootstrap 5 bietet auch responsive Gutter-Klassen, mit denen Sie den Abstand für bestimmte Haltepunkte anpassen können. Beispielsweise würde .gx-sm-4 den horizontalen Rand nur auf Bildschirmen mit einem „kleinen“ Haltepunkt (z. B. Smartphones) entfernen.

Bootstrap 4

In Mit Bootstrap 4 können Sie die Klasse .no-gutters direkt auf dem verwenden .row:

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

Bootstrap 3.4.0

In Bootstrap 3.4 wurde eine spezielle .row-no-gutters-Klasse eingeführt:

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

Bootstrap 3 (<= 3.3.9)

In Bootstrap 3.3.9 und früher werden Dachrinnen mithilfe von Polsterung erstellt. Um sie zu entfernen, müssen Sie das folgende CSS verwenden:

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

.no-gutter > [class*="col-"] {
  padding-right: 0;
  padding-left: 0;
}
Fügen Sie die .no-gutter-Klasse zum .row-Element hinzu.
Das obige ist der detaillierte Inhalt vonWie kann der Stegabstand zwischen Bootstrap-Spalten beseitigt werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!