Wie entferne ich Rinnenraum in Bootstrap-Grid-Systemen?

Entfernen des Zwischenraums für bestimmte Divs

Einführung

Das Bootstrap-Rastersystem verwendet einen Standardzwischenraum von 30 Pixeln zwischen den Spalten. trägt zum sauberen und konsistenten Layout bei. Es kann jedoch wünschenswert sein, diesen Zwischenraum für bestimmte Elemente innerhalb einer Reihe zu entfernen. In diesem Artikel werden Techniken untersucht, um dieses Ziel zu erreichen, ohne die Reaktionsfähigkeit von Bootstrap zu beeinträchtigen oder unansehnlichen Leerraum einzuführen.

Bootstrap 3.x

Für Bootstrap 3.x ist die Lösung geworden einfacher. Für die Dachrinne wird nun eine Polsterung verwendet, die das Entfernen erleichtert. Implementieren Sie das folgende CSS:

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

.row.no-gutter [class*='col-']:not(:first-child),
.row.no-gutter [class*='col-']:not(:last-child) {
  padding-right: 0;
  padding-left: 0;
}

Um den Bundsteg für bestimmte Divs zu entfernen, weisen Sie einfach die Klasse „no-gutter“ der entsprechenden Zeile zu.

Bootstrap 4.x

Bootstrap 4.x enthält eine integrierte Utility-Klasse, „no-gutters“, die das Gewünschte erreicht Effekt.

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

Bootstrap 5.x

Die neueste Version von Bootstrap bietet mit der Einführung von Rinnenklassen eine noch detailliertere Kontrolle über den Rinnenabstand. Verwenden Sie „g-0“, um Dachrinnen vollständig zu entfernen, oder passen Sie sie mithilfe der Klassen „g-1-5“ an. Diese Klassen können auch responsiv mit Haltepunkten angewendet werden, z. B. „gx-sm-4“, um horizontale Stege für Bildschirme anzupassen, die kleiner als 768 Pixel sind.

Das obige ist der detaillierte Inhalt vonWie entferne ich Rinnenraum in Bootstrap-Grid-Systemen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!