Können die Push/Pull-Klassen von Bootstrap gleich große Spalten auf Mobilgeräten neu anordnen?

Bootstrap-Spalten mit Push/Pull neu anordnen: Einschränkungen und alternative Ansätze

Beim Umgang mit Spalten gleicher Größe (.col-*-12) entsteht eine häufige Frage bezüglich der Machbarkeit, ihre Reihenfolge mithilfe der Push- und Pull-Anweisungen von Bootstrap zu ändern. Der Zweck dieser Abfrage besteht darin, herauszufinden, ob es möglich ist, die Platzierung zweier solcher Spalten auf Geräten mit mobilen Bildschirmgrößen umzukehren.

Einschränkungen von Push/Pull

Eine Neuordnung ist leider nicht möglich .col-*-12-Spalten mit Push- und Pull-Klassen. Dies liegt daran, dass die Summe dieser Spalten die vordefinierte Rastergröße von 12 Spalten überschreitet, wie durch die @grid-columns-Variable in Bootstrap angegeben.

Alternative Ansätze

Um das zu erreichen Bei gewünschter Nachbestellung ziehen Sie folgende Alternativen in Betracht:

1. Ändern der HTML-Struktur und Verwenden von Push/Pull für größere Bildschirme:

Ordnen Sie die Spalten im HTML neu an und wenden Sie Push/Pull-Klassen an, um die gewünschte Reihenfolge auf größeren Bildschirmen zu erreichen. Zum Beispiel:

<code class="html"><div class="row">
  <div class="col-xs-12 col-sm-6 col-sm-push-6">
    <p>test2</p>
  </div>

  <div class="col-xs-12 col-sm-6 col-sm-pull-6">
    <p>test1</p>
  </div>
</div></code>

2. Verwenden von CSS-Transformationen zum Umkehren der Spaltenreihenfolge auf Mobilgeräten:

Wenden Sie das folgende CSS an, um die Reihenfolge vertikal gestapelter Spalten auf Geräten mit einer Bildschirmgröße von 767 Pixel oder weniger umzukehren:

<code class="css">@media (max-width: 767px) {
  .row.reorder-xs {
    transform: rotate(180deg);
    direction: rtl; /* Fix horizontal alignment */
  }

  .row.reorder-xs > [class*="col-"] {
    transform: rotate(-180deg);
    direction: ltr; /* Fix horizontal alignment */
  }
}</code>

Beachten Sie, dass dieser Ansatz die Verwendung einer HTML-Klasse erfordert, die für die gewünschten Spalten, die neu angeordnet werden sollen, spezifisch ist.

Das obige ist der detaillierte Inhalt vonKönnen die Push/Pull-Klassen von Bootstrap gleich große Spalten auf Mobilgeräten neu anordnen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!