Bestellung funktioniert nicht Bootstrap v4.0.0-beta.2

Ich habe zwei divs mit col-lg-5. Ich möchte das zweite div als Reihenfolge zuerst machen, wenn der Ansichtsport auf mobile Geräte wechselt. Ich verwende Bootstrap order-* Klasse in v4.0.0-beta.2.Bestellung funktioniert nicht Bootstrap v4.0.0-beta.2

<div class="col-lg-5 col-12 order-col-12"> 
    [first_div] 
</div> 

<div class="col-lg-5 background-10 col-12 order-col-1"> 
    [second_div] 
</div>

Aber in kleinen Geräten, wenn ich col dies wie geändert werden soll:

<div class="col-lg-5 background-10 col-12 order-col-1"> 
    [second_div] 
</div> 

<div class="col-lg-5 col-12 order-col-12"> 
    [first_div] 
</div>

Aber es ist nicht zu ändern, und es bleibt in der gleichen Reihenfolge.

Quelle

2017-12-10 PSA

FYI: '.Order-Col- *' existiert nicht in Bootstrap. Bei der Standardgröße 'xs' können Sie' .order-12' verwenden, während '.order-sm-12',' .order-md-12' usw. in späteren Phasen verwendet werden. Gleiches gilt für die '.col' Klassen: Bei' xs' ist es einfach '.col-1', während Sie bei anderen Breakpoints den Breakpoint explizit definieren, z. '.col-md-1'. – dferenc

Bearbeitete Antwort.

Ich sehe. Bootstrap 4 geht davon aus, dass Sie für den kleinsten Gerätebildschirm (xs) entwickeln, so dass order-1 für das kleinste Gerät (xs) verwendet werden soll. order-sm-1 bedeutet dies für alle Geräte mit der Größe> = sm zu verwenden. Sie müssen also mit der Bestellung für die kleinsten Geräte (mobil) beginnen. Daher müssen Sie den Inhalt aus dem zweiten Div als Inhalt vom ersten Div setzen und umgekehrt. Dann sagen Sie bootstrap: Wenn es größer oder gleich sm Größe ist, ändern Sie die Reihenfolge order-sm-12.

Zusammengefasst: Mit Bootstrap 4 beginnen Sie mit der Entwicklung der kleinsten Bildschirmgröße (xs) und definieren Ihre Haltepunkte für Geräte größer oder gleich (sm, md, xl).

<div class="row"> 
    <div class="col-lg-5 col-12 order-sm-12"> 
    [content_second_div] 
    </div> 
    <div class="col-lg-5 background-10 col-12 order-sm-1"> 
    [content_first_div] 
</div> 
</div>

Lesen Sie hier für weitere Informationen: https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints

außerdem sicher, dass Ihre <head>

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Quelle

2017-12-10 10:17:31 Daniel

Ich wickelte bereits, aber es funktioniert immer noch nicht mit Bestellung-sm-1. Wenn es keine Bestellung-Col- *, dann was für extra kleine Geräte verwenden? als Bootstrap 4 verwendet col statt xs. – PSA

enthält Ich denke, die einfachste Lösung, um die order-first order-lg-2 Klassen auf dem zweiten div zu verwenden ist. Wenn Sie die Spaltenreihenfolge an einem anderen Haltepunkt als lg ändern möchten, können Sie natürlich auch eine der verfügbaren Klassen .order{-sm|-md|-lg|-xl}-2 verwenden.

Da .order-first tatsächlich order: -1 für das zweite div setzt, garantiert es, dass das zweite div optisch das erste div ist, es besteht also keine Notwendigkeit, die Reihenfolge explizit für das erste div festzulegen. (Dies wäre nicht der Fall mit .order-1!)
Da Bootstrap eine mobile erste Denkweise hat, müssen wir eine der .order{-sm|-md|-lg|-xl}-2 Klassen hinzufügen, um die "ursprüngliche" Reihenfolge der Spalten auf größeren Bildschirmen zu setzen.

<div class="container"> 
 
    <div class="row"> 
 
     <div class="col-lg-5"> 
 
      [first_div] 
 
     </div> 
 

 
     <div class="col-lg-5 order-first order-lg-2"> 
 
      [second_div] 
 
     </div> 
 
    </div> 
 
</div> 
 

 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>

Hinweis: für sicher, dass Sie das, aber Ihr aktuelles Beispiel verfehlt die .row -und für die ordnungsgemäßen den .container Formatierung - Wrapper. Die .row ist wichtig, um diese Arbeit zu machen.

Quelle

2017-12-16 00:27:47 dferenc

Bestellung funktioniert nicht Bootstrap v4.0.0-beta.2

Antwort

Verwandte Themen