Heim > Web-Frontend > CSS-Tutorial > Wie entferne ich den Zwischenraum aus einem bestimmten Div in Bootstrap?

Wie entferne ich den Zwischenraum aus einem bestimmten Div in Bootstrap?

DDD
Freigeben: 2024-11-22 11:53:15
Original
762 Leute haben es durchsucht

How to Remove Gutter Space from a Specific Div in Bootstrap?

Entfernen Sie den Zwischenraum nur für eine bestimmte Abteilung, ohne die Reaktionsfähigkeit zu beeinträchtigen

Das Bootstrap-Rastersystem enthält normalerweise einen standardmäßigen Zwischenraum zwischen den Spalten, was dazu führt ein optisch ansprechenderes Layout. In bestimmten Szenarien kann es jedoch wünschenswert sein, diesen Zwischenraum für ein bestimmtes Div zu entfernen.

Bootstrap 5-Lösung:

Bootstrap 5 führt dedizierte Zwischenraumklassen ein, die Flexibilität bieten beim Anpassen der Rinnenabstände im gesamten Raster. Um Dachrinnen für ein bestimmtes Div zu entfernen, verwenden Sie die Klasse g-0. Darüber hinaus können Sie die Klassen gx-* und gy-* verwenden, um horizontale bzw. vertikale Rinnen anzupassen und so die Reaktionsfähigkeit über verschiedene Haltepunkte hinweg aufrechtzuerhalten.

Bootstrap 4-Lösung:

In Mit Bootstrap 4 ist dies unkompliziert. Das Framework enthält eine No-Gutters-Klasse, die auf eine bestimmte Zeile angewendet werden kann und so effektiv den Gutter-Space für alle Spalten innerhalb dieser Zeile entfernt.

Bootstrap 3-Lösung:

Bei Bootstrap 3 unterscheidet sich der Ansatz geringfügig. Aufgrund der Verwendung von Polsterungen anstelle von Rändern für Bundstege kann das folgende CSS auf das gewünschte Div angewendet werden:

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

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

Das obige ist der detaillierte Inhalt vonWie entferne ich den Zwischenraum aus einem bestimmten Div in Bootstrap?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage