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 umzukehren, mit Push/Pull-Anweisungen. 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 die beizubehalten gewünschtes Layout.

2. CSS-Transformationstrick:

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

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!