Bootstrap 4 Flüssigkeit Flex-Reihe mit 2 reaktiven Säulen

Question

Mein Ziel ist es, this area so ansprechend wie möglich zu machen. Sieht gut aus auf extra großen Ansichtsfenstern, aber wenn wir anfangen zu schrumpfen, Beispiel: viewport at ~930px kann ich das Foto nicht perfekt ausgerichtet halten wie im ersten Screenshot.

Ich habe versucht, den Fotobereich eine background-size: cover, aber diese Lösung schneidet nur die Ränder des Bildes, wie wir zu einem kleineren Viewport (und das ist keine Option).

Das zweite Problem ist in einem mobilen Ansichtsfenster: diese 2 Blöcke müssen gestapelt werden. Ziemlich sicher, dass ich diesen Teil herausfinden kann, nachdem das erste Problem gelöst wurde.

<section class="card-group"> 
    <div class="card"> 
      <img src="..." class="img-fluid"> 
    </div> 
    <div class="card card-vcenter"> 
      <div class="card-block">.....</div> 
    </div> 
</section> 

.card-vcenter{ 
    display: flex; 
    align-items: center; 
    justify-content: center; 
} 

Vielen Dank im Voraus!

Answer 1

Sie sollten die richtigen Bootstrap-Klassen verwenden. Ihr Problem ist möglicherweise in den CSS-Stilen für diese .card-, .card-group-Klassen zu finden.

Sie als solche Code sollte:

<section class="card-group"> 
    <div class="container-fluid"> 
    <div class="row">  
     <div class="col-md-6"> 
     <img src="..." class="img-fluid"> 
     </div> 
     <div class="cold-md-6"> 
     <div class="card-block">.....</div> 
     </div> 
    </div> 
    </div> 
    </section> 

Hinzufügen eines neuen <div class="row"> und Ihre zwei col-md-6 für jede Ihrer Karten, und schließen Sie den Behälter und Abschnitt

Ihre CSS:

Mit den bereits reaktionsfähigen Arbeitsklassen von Bootstrap können Sie Ihre "Karten" -Klassen ablegen und müssen sich nicht mehr darum kümmern, wie sich Ihre Inhalte anordnen. Lesen Sie in Ihrer Bootstrap-Dokumentation nach! :)