Wie entferne ich Dachrinnen in Bootstrap in verschiedenen Versionen?

Entfernen von Bundstegen in Bootstrap

In Bootstrap werden Spalten durch einen 30-Pixel-Steg getrennt, aber es gibt Fälle, in denen es notwendig ist, ihn zu entfernen. Dieser Artikel befasst sich mit den Lösungen zum Entfernen von Dachrinnen, ohne auf den margin-left:-30px-Ansatz zurückzugreifen.

Bootstrap 5 (Neueste Version)

Bootstrap 5 führt eine vereinfachte Lösung ein mit der Klasse .no-gutters. Durch das Hinzufügen dieser Klasse zur .row wird der Abstand zwischen den Spalten entfernt:

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

Bootstrap 4

Bootstrap 4 hat außerdem ein .no-gutters Klasse, ähnlich wie Bootstrap 5:

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

Bootstrap 4 enthält auch reaktionsfähige Gutter-Klassen und bietet so mehr Flexibilität:

<!-- Remove gutters on small and above breakpoints -->
<div class="row g-0 g-sm-3">
  <div class="col">x</div>
  <div class="col">x</div>
  <div class="col">x</div>
</div>

Bootstrap 3.4.0

Für Bootstrap Versionen 3.4.0 und höher, ein dediziertes

.row-no-gutters Klasse kann verwendet werden:

<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)

In früheren Bootstrap-Versionen (3 bis 3.3.9) werden Dachrinnen entfernt erfordert die Anpassung von Rand und Abstand:

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

/* .row > [class*="col-"] */
.no-gutter > [class*="col-"] {
  padding-right: 0;
  padding-left: 0;
}Fügen Sie die hinzu </p>
<p>.no-gutter<strong>-Klasse zur </strong>.row<strong> und schon sind Sie fertig:</strong></p>
<pre class="brush:php;toolbar:false"><div class="row no-gutter">
  <div class="col">x</div>
  <div class="col">x</div>
  <div class="col">x</div>
</div>

Mit diesen Techniken können Sie Dachrinnen in Bootstrap ganz einfach eliminieren und eine erreichen gewünschte visuelle Gestaltung.

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