Html Bootstrap 4 fluid Flex行，带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;
}

.....
.卡vcenter{
显示器：flex；
对齐项目：居中；
证明内容：中心；
}

---

提前谢谢

您应该使用适当的引导响应类。您的问题可能在.card、.card组类的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>

---

有了bootstrap已经具有响应能力的工作类，你可以放弃你的“卡片”类，而不必担心你的内容如何排列。请阅读您的引导文档！：）

你完全正确。我应该考虑更基本的问题，而不是试图用新的BS4组件在不属于它们的地方重载代码！但是，如果您使用您的框架而不是反对它，您将消除大多数响应性问题

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