Wie ordne ich mit Bootstrap 4 ein großes Div neben zwei kürzeren Divs auf dem Desktop an und stapele sie auf Mobilgeräten?

Ein großes Div neben zwei kürzeren Divs auf dem Desktop und gestapelt auf Mobilgeräten mit Bootstrap 4

Problem:

Sie Sie möchten drei Divs auf einer Webseite so anordnen, dass sie auf Desktop-Bildschirmen nebeneinander und auf Mobilgeräten gestapelt angezeigt werden. Das erste Div (A) sollte höher sein als die anderen beiden (B und C).

Lösung:

Um dieses Layout mit Bootstrap 4 zu erreichen, müssen Sie Folgendes tun Deaktivieren Sie die Flexbox-Eigenschaft auf größeren Bildschirmen und verwenden Sie Floats, um die kürzeren Divs (B und C) auf natürliche Weise nach rechts zu ziehen. So geht's:

1. Erstellen Sie einen Container und eine Zeile mit den Container-Fluid- bzw. Row-Klassen.
2. Fügen Sie der Zeile eine D-Flex-Klasse für mobile Reaktionsfähigkeit hinzu.

3. Erstellen Sie innerhalb der Zeile drei Spalten:

   • Div A: Geben Sie ihm das col-lg-6 order-1 Float-Left-Klassen. Diese Spalte wird höher sein als die anderen.
   • Div B: Geben Sie ihr die Klassen col-lg-6 order-0 float-left. Diese Spalte wird nach rechts gezogen.
   • Div C: Geben Sie ihr die Klassen col-lg-6 order-1 float-left. Diese Spalte wird unter Div A und rechts von Div B platziert.

Hier ist das aktualisierte Code-Snippet:

<div class="container-fluid">
    <div class="row d-flex d-lg-block">
         <div class="col-lg-6 order-1 float-left">
            A
        </div>
        <div class="col-lg-6 order-0 float-left">
            B
        </div>
        <div class="col-lg-6 order-1 float-left">
            C
        </div>
    </div>
</div>

Durch Deaktivierung der Flexbox Für größere Bildschirme und die Verwendung von Floats können Sie ein Layout erstellen, bei dem Div A höher ist als Divs B und C und in dem die drei Divs gestapelt sind auf mobilen Geräten.

Das obige ist der detaillierte Inhalt vonWie ordne ich mit Bootstrap 4 ein großes Div neben zwei kürzeren Divs auf dem Desktop an und stapele sie auf Mobilgeräten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!