Können Push/Pull-Klassen für Bootstrap-Spalten gleicher Breite verwendet werden?

Bootstrap-Spalten mit Push/Pull für Elemente gleicher Breite neu anordnen

Beim Arbeiten mit dem Rastersystem von Bootstrap ist die Anpassung der Spaltenreihenfolge von entscheidender Bedeutung für responsive Layouts. Es kann jedoch schwierig sein, Spalten gleicher Größe mithilfe von Push/Pull-Anweisungen neu anzuordnen.

Kann Push/Pull für .col-*-12-Elemente verwendet werden?

Nein, es ist nicht möglich, die Reihenfolge der Spalten mit Klassen wie „.col-xs-12.col-xs-push-12“ und zu ändern „.col-xs-12.col-xs-pull-12“, weil die kombinierte Breite die 12-Spalten-Rasterdefinition von Bootstrap überschreitet.

Alternative Lösungen:

1. Neuanordnen in HTML und Verwenden von Ordnungsklassen für größere Bildschirme

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

<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. CSS-Transformation für die Neuordnung vertikaler Spalten

Verwenden Sie CSS-Transformationen, um die Reihenfolge der vertikal untereinander angezeigten Spalten umzukehren:

<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 sind wird in IE9 mit Herstellerpräfixen unterstützt.

Das obige ist der detaillierte Inhalt vonKönnen Push/Pull-Klassen für Bootstrap-Spalten gleicher Breite verwendet werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!