Wie kann ich Dachrinnen in Bootstrap entfernen?

Entfernen von Dachrinnen in Bootstrap: Eine umfassende Anleitung

Einführung

Wenn Sie mit Bootstrap arbeiten, Der 30-Pixel-Steg zwischen den Spalten kann manchmal ein Hindernis für Ihr Design sein. In diesem Artikel werden wir verschiedene Methoden untersuchen, um diesen Rand zu entfernen, ohne auf negative Ränder zurückgreifen zu müssen.

Bootstrap 5

Die neueste Version von Bootstrap 5 führt eine spezielle Klasse ein , .no-gutters, die dem .row-Element hinzugefügt werden können, um alle horizontalen und vertikalen Elemente zu entfernen Dachrinnen.

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

Darüber hinaus bietet Bootstrap 5 eine Reihe neuer Dachrinnenklassen zur Feinabstimmung des Abstands zwischen Spalten.

Bootstrap 4

Für Bootstrap 4 kann die Klasse .no-gutters auch für das .row-Element zum Entfernen verwendet werden Dachrinnen.

<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

Bootstrap 3.4.0 führte die .row-no-gutters-Klasse ein, die speziell zum Entfernen von Dachrinnen entwickelt wurde.

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

Bootstrap 3 , <= 3.3.9

Für Bootstrap 3-Versionen vor 3.4.0 werden Zwischenräume mithilfe von Polsterung erstellt. Um sie zu entfernen, können Sie eine benutzerdefinierte CSS-Klasse definieren:

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

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