ブートストラップ4流体2列のフレックス列

Question

私の目標はthis areaを可能な限り反応させることです。余分な大きなビューポートで見栄えが良いように見えますが、縮小を開始すると、例：viewport at ~930px最初のスクリーンショットのように写真を完全に並べることはできません。

私は写真の領域をbackground-size: coverにしようとしましたが、このソリューションでは、より小さなビューポートになると画像の端がカットされます（オプションではありません）。

2番目の問題はモバイルビューポートにあります。これらの2つのブロックはスタックする必要があります。最初の問題が解決された後、私はその部分を理解することができます。

<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; 
} 

ありがとうございます！

Answer 1

適切なブートストラップ応答クラスを使用する必要があります。あなたの問題は、それらの.card、.card-groupクラスのCSSスタイルで見つけることができます。

次のようなコーディングする必要があります

<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> 

あなたのCSSを、コンテナを閉じ、あなたのカードのそれぞれのための新しい<div class="row">とあなたの2 COL-MD-6を追加し、セクション：

section.card-group img { 
    padding: 0; 
    margin: 0; 
} 
section.card-group .col-md-6 { 
    /*insert background, font, padding, margin styles*/ 
} 
section.card-group .card-block { 
    /*insert background, font, padding, margin styles*/ 
} 

ブートストラップが既に反応している作業クラスでは、 "カード"クラスを捨てることができ、コンテンツの整列方法を気にする必要はありません。あなたのブートストラップのドキュメントを読んでください！ :)