Können Sie Bootstrap-Spalten mit .col-*-12 mithilfe von Push und Pull neu anordnen?

Bootstrap-Spalten mit .col-*-12 mithilfe von Push und Pull neu organisieren

Im Bereich der Bootstrap-Rasterlayouts können Instanzen auftreten Hier müssen Sie die Reihenfolge der Spalten mit der Klasse .col-xs-12 auf kleineren Bildschirmen (mobilen Geräten) ändern. Es ist wichtig zu verstehen, dass die herkömmlichen Push- und Pull-Anweisungen in diesem Szenario möglicherweise keine direkte Lösung bieten.

Können Sie Spalten mit .col-*-12 mithilfe von Push/Pull neu anordnen?

Nein, Sie können .col--12-Spalten nicht mit den Klassen .col--push-12 und .col-*-pull-12 neu anordnen. Dies liegt daran, dass die Gesamtbreite dieser Spalten das definierte 12-Spalten-Raster überschreitet.

Alternative Ansätze für die Neuordnung von .col-*-12-Spalten:

• Spalten in HTML neu anordnen: Sie können die Reihenfolge der Spalten in Ihrem HTML-Markup ändern und die Ordnungsklassen auf größeren Bildschirmgrößen verwenden. 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>

• Vertikale Spaltenreihenfolge mit CSS-Transformationen umkehren: Bei dieser Methode werden CSS-Transformationen verwendet, um die Spaltenreihenfolge auf kleineren Bildschirmen zu drehen.

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

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

Hinweis: CSS-Transformationen werden in IE9 und höher unterstützt, aber denken Sie daran, Herstellerpräfixe für die browserübergreifende Kompatibilität einzubeziehen.

Das obige ist der detaillierte Inhalt vonKönnen Sie Bootstrap-Spalten mit .col-*-12 mithilfe von Push und Pull neu anordnen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!