1

私の目標は、この領域を可能な限りレスポンシブにすることです。非常に大きなビューポートでは見栄えがしますが、縮小し始めると、例:ビューポートが ~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;
}

前もって感謝します！

4

1 に答える 1

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>

<div class="row">カードごとに新しい col-md-6 と 2 つの col-md-6 を追加し、コンテナーとセクションを閉じます。

あなたのCSS:

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*/
}

ブートストラップのすでにレスポンシブな作業クラスを使用すると、「カード」クラスを捨てることができ、コンテンツがどのように整列するかを気にする必要がなくなります。ブートストラップのドキュメントを読んでください! :)

于 2016-04-18T21:06:51.163 に答える