带有 2 个响应列的 Bootstrap 4 流体 Flex 行

Question

我的目标是让this area 尽可能地响应。在超大视口上看起来很棒，但是当我们开始缩小时，例如：viewport at ~930px 我无法像第一个屏幕截图那样让照片完美排列。

我尝试将照片区域设置为background-size: cover，但是，当我们进入更小的视口时，该解决方案只会切断图片的边缘（这不是一个选项）。

第二个问题是关于移动视口的：这两个块需要堆叠。不过，我很确定在第一个问题解决后我可以弄清楚那部分。

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

为每张卡片添加一个新的<div class="row"> 和两个 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*/
}

使用 bootstrap 已经响应的工作类，您可以放弃您的“卡片”类，而不必为您的内容如何排列而烦恼。阅读您的引导文档！ :)