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

Bootstrap-Rastersystem: Spaltenstapelung mit festen Wrappern überwinden

Das Rastersystem von Bootstrap ist eine grundlegende Komponente im Webdesign für die Erstellung responsiver Layouts. Bei Verwendung eines Containers mit fester Breite können sich die Spalten im Raster jedoch bei kleineren Browsergrößen vertikal stapeln.

Das Problem:

Bei Verwendung eines Wrappers mit fester Breite In Bootstrap 3 werden die Rasterspalten zusammengeklappt und übereinander gestapelt, wenn die Größe des Browserfensters geändert wird, auch wenn der Wrapper selbst gleich bleibt Größe.

Die Lösung: Nicht stapelbare Klassen verwenden

Um zu verhindern, dass Spalten in Containern mit fester Breite gestapelt werden, stellt Bootstrap eine Reihe von „nicht stapelbaren“ Klassen bereit . Diese Klassen verwenden Medienabfragen, um das Standardstapelverhalten bei bestimmten Bildschirmauflösungen zu überschreiben.

In Bootstrap 3 wird den nicht stapelbaren Klassen col-xs- vorangestellt. Diese Klassen können auf Spalten angewendet werden, um zu verhindern, dass sie bei kleineren Bildschirmgrößen zusammenfallen.

Beispiel:

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

In diesem Beispiel bleiben die Spalten seitlich auch bei den kleinsten Bildschirmgrößen zur Seite.

Bootstrap 4 Update:

In Bootstrap 4 wurde das Konzept der nicht stapelbaren Klassen vereinfacht. Das xs-Präfix ist nicht mehr erforderlich. Stattdessen besteht das Standardverhalten darin, das Stapeln von Spalten zu verhindern. Um sicherzustellen, dass die Spalten nebeneinander bleiben, verwenden Sie einfach die Standard-Spaltenklassen (z. B. col-4).

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