Wie kann verhindert werden, dass Bootstrap-Rasterspalten in einem Container mit fester Breite gestapelt werden?

So verhindern Sie das Stapeln im Bootstrap-Raster mit festem Wrapper

In Bootstrap ermöglicht das Rastersystem, dass Spalten entsprechend der Breite des Ansichtsfensters gestapelt werden . Dieses Verhalten kann jedoch in bestimmten Szenarien unerwünscht sein, beispielsweise bei Verwendung eines Containers mit fester Breite.

Um zu verhindern, dass Spalten in einem Container mit fester Breite gestapelt werden, müssen nicht stapelbare Klassen verwendet werden.

Verwenden von col-xs-* für Bootstrap 3

In Bootstrap 3 sollte die Klasse col-xs-* verwendet werden, um Spalten zu definieren, die nicht gestapelt werden. Der Haltepunkt xs (extra klein) stellt die kleinste Bildschirmgröße dar und wird verwendet, um das Verhalten bei den extremsten Auflösungen zu steuern.

Zum Beispiel:

<code class="html"><div class="container-fixed">
  <div class="row">
    <div class="col-xs-4">.col-xs-4</div>
    <div class="col-xs-4">.col-xs-4</div>
    <div class="col-xs-4">.col-xs-4</div>
  </div>
</div></code>

Mit col-* für Bootstrap 4

In Bootstrap 4 ist die Klasse col-xs-* nicht mehr erforderlich. Stattdessen kann die col-*-Klasse ohne Haltepunktpräfix direkt verwendet werden, um nicht stapelbare Spalten zu definieren:

<code class="html"><div class="container-fluid">
  <div class="row">
    <div class="col-4">.col-4</div>
    <div class="col-4">.col-4</div>
    <div class="col-4">.col-4</div>
  </div>
</div></code>

Implementierung

Durch Einbindung der entsprechenden nicht-stapelbaren Spalten Durch das Stapeln von Klassen im Rastersystem können Sie wirksam verhindern, dass sich Spalten stapeln, wenn die Größe des Browserfensters geändert wird, und so sicherstellen, dass das Layout innerhalb der festen Breite intakt bleibt Behälter.

Das obige ist der detaillierte Inhalt vonWie kann verhindert werden, dass Bootstrap-Rasterspalten in einem Container mit fester Breite gestapelt werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!