Wie entferne ich Bootstrap-Gutters aus bestimmten Divs, ohne die Reaktionsfähigkeit zu beeinträchtigen?

So entfernen Sie Bundstegraum für ein bestimmtes Div, ohne die Bootstrap-Reaktionsfähigkeit zu beeinträchtigen

In einem Bootstrap-Layout erzeugen Bundstege den Leerraum zwischen Spalten, der normalerweise etwa 20–30 Pixel breit ist . Während dies eine optisch ansprechende Trennung bietet, kann es Fälle geben, in denen Sie diesen Zwischensteg für bestimmte Divs entfernen möchten, ohne die Reaktionsfähigkeit des Layouts zu beeinträchtigen.

Bootstrap 3-Lösung

Für Bootstrap 3 ist die Das Entfernen von Dachrinnen ist durch die Verwendung von Polsterung anstelle von Rändern zur Erstellung der Dachrinnen einfacher geworden. Hier ist der CSS-Code:

.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 in Bootstrap 3 zu entfernen, fügen Sie einfach die Klasse „no-gutter“ zu den entsprechenden Zeilen hinzu:

<div class="row no-gutter">
  <div class="col-lg-1"><div>1</div></div>
  <div class="col-lg-1"><div>1</div></div>
  <div class="col-lg-1"><div>1</div></div>
</div>

Bootstrap 4 und 5 Lösungen

Bootstrap 4 führt die „No-Gutters“ ein Klasse zum Entfernen von Dachrinnen aus einer ganzen Reihe:

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

Bootstrap 5 erweitert dies um Dachrinnenklassen, die eine feinkörnige Steuerung sowohl des horizontalen als auch des vertikalen Abstands ermöglichen. Die Klassen umfassen:

• g-0 für keine Dachrinnen
• g-(1-5) zum Anpassen des Abstands
• gy-* zum Anpassen des vertikalen Abstands
• gx-* zum Anpassen des horizontalen Abstands

Zum Beispiel, um den Bundsteg für bestimmte Divs zu entfernen Wahrung der Reaktionsfähigkeit:

#main_content .col {
  padding: 0 !important;
}

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

Das obige ist der detaillierte Inhalt vonWie entferne ich Bootstrap-Gutters aus bestimmten Divs, ohne die Reaktionsfähigkeit zu beeinträchtigen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!