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已经具有响应能力的工作班，你可以放弃你的＆＃34;卡＆＃34;课程并不必担心你的内容如何排队。阅读您的bootstrap文档！：）

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

1 个答案: