Bootstrap 4 个流畅的 Flex 行和 2 个响应列

Question

我的目标是this area as responsive as possible. Looks great on extra large viewports, however when we start shrinking down, example: 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

您应该使用适当的 bootstrap 响应式类。您的问题可能出现在那些 .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 已经响应式工作类，您可以放弃 "card" 类，而不必担心内容的排列方式。阅读您的 bootstrap 文档！ :)

Bootstrap 4 个流畅的 Flex 行和 2 个响应列

Bootstrap 4 fluid Flex row with 2 responsive columns

html

css

flexbox

twitter-bootstrap

twitter-bootstrap-4