Wie ordne ich .col-*-12-Spalten in Bootstrap mithilfe von Push/Pull neu an?

Spalten mit Push/Pull für .col-*-12 in Bootstrap neu anordnen

In Bootstrap können die Push- und Pull-Anweisungsklassen sein Wird verwendet, um die Platzierung von Säulen relativ zu den umgebenden Säulen anzupassen. Bei Spalten mit einer Breite von 12 (d. h. .col-*-12) ist jedoch zu beachten, dass Push/Pull ihre Reihenfolge nicht direkt ändern kann.

Das liegt an der Summe der Breiten der beiden Spalten überschreitet die von Bootstrap angegebene Standardrasterbreite von 12 Spalten. Stattdessen gibt es zwei Ansätze, diese Spalten neu anzuordnen:

1. Umkehren der HTML-Spaltenreihenfolge und Anwenden von Reihenfolgeklassen auf größeren Bildschirmen

Bei diesem Ansatz können Sie die Reihenfolge der Spalten in Ihrem HTML-Markup vertauschen und dann Push/Pull verwenden, um ihre Reihenfolge auf größeren Bildschirmen zu ändern. 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 Sie CSS-Transformationen für die vertikale Neuordnung

Alternativ können Sie CSS-Transformationen verwenden, um die Reihenfolge der Spalten umzukehren, wenn sie auf kleineren Bildschirmen vertikal gestapelt werden:

<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 CSS Transformationen werden in IE9 und höher unterstützt, daher müssen Sie aus Kompatibilitätsgründen möglicherweise Herstellerpräfixe einschließen.

Das obige ist der detaillierte Inhalt vonWie ordne ich .col-*-12-Spalten in Bootstrap mithilfe von Push/Pull neu an?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!