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