Können Push/Pull-Klassen verwendet werden, um .col-*-12-Spalten in Bootstrap neu anzuordnen?

Ändern der Spaltenreihenfolge mit Bootstrap Push/Pull für .col-*-12-Spalten

Problem:

Sie zielen um zwei gleich große Spalten (.col-xs-12) in Bootstrap auf Mobilgeräten neu anzuordnen und ihre Reihenfolge mithilfe von Push/Pull-Anweisungen umzukehren. Sie fragen sich jedoch, ob dieser Ansatz für Spalten dieser Größe realisierbar ist.

Auflösung:

Push/Pull-Einschränkungen:

Push- und Pull-Anweisungen dienen dazu, die Spaltenreihenfolge für verschiedene Bildschirmgrößen zu ändern, haben jedoch Einschränkungen. Das Neuanordnen von Spalten, die das gesamte 12-Spalten-Raster (.col-*-12) belegen, ist mit diesen Helfern nicht möglich.

Alternative Ansätze:

1. HTML-Reihenfolge neu anordnen:Sie können die Spaltenreihenfolge in HTML manuell neu anordnen und Push/Pull-Klassen auf breiteren Bildschirmen anwenden, um das gewünschte Layout beizubehalten.

2. CSS-Transformationstrick:

   • Implementieren Sie eine CSS-Transformation in einem Zeilencontainer, um die Spaltenreihenfolge effektiv umzukehren.
   • Stellen Sie die richtige horizontale Ausrichtung sicher, indem Sie Richtungsmodifikatoren in Verbindung mit Transformationen verwenden.
   • Beachten Sie, dass Transformationen in IE9 mit Herstellerpräfixen unterstützt werden.

Das obige ist der detaillierte Inhalt vonKönnen Push/Pull-Klassen verwendet werden, um .col-*-12-Spalten in Bootstrap neu anzuordnen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!