Bootstrap/flexbox 卡片：将图像移动到桌面上的 left/right 侧

Question

我正在尝试使用启用了 flexbox 的 Bootstrap 4 构建以下卡片布局。图片取自我当前的实现，它按预期工作。

HTML 结构如下：

<section>
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <div class="card">
          <div class="card-block">
            <h4 class="card-title">Curabitur gravida vestibulum imperdiet.</h4>
            <p class="card-text">Cras convallis ut turpis vitae facilisis. Morbi eu augue vel quam efficitur rhoncus vitae eget lectus. Cras augue ligula, aliquam ut enim ut, feugiat imperdiet sem. Integer sed mi quis nisl eleifend interdum.</p>
            <p class="card-text">Cras convallis ut turpis vitae facilisis. Morbi eu augue vel quam efficitur rhoncus vitae eget lectus. Cras augue ligula, aliquam ut enim ut, feugiat imperdiet sem.</p>
            <a href="#" class="btn btn-primary">Read More</a>
          </div>
        </div>
      </div>
      <div class="col-md-6">
        <img class="card-img-bottom" src="img1.jpg" alt="" title="">
      </div>
    </div>
  </div>
</section>

现在，当我缩放到更大的屏幕时，我得到了以下输出（这是 Bootstrap 所期望的，但不是想要的）：

我想看到的是：

所以我的问题是，如何才能正确实现这种布局？我正在使用 flex-box，所以 Bootstrap 列 (col-*) 总是相同的高度，这正是我想要的。但我应该删除两列之间的填充，然后使两列内容始终覆盖父级高度的 100%，最后确保图片保持其纵横比，因此应该像我在示例中那样从中心裁剪。

我用 Google 搜索并尝试了许多不同的解决方案，但所有这些解决方案似乎都过于复杂或 "hacky" 解决方案。所以我想知道是否真的没有简单的方法来实现这种布局...？

注意：解决方案不一定是Bootstrap相关，这种问题的通用解决方案更好。

Answer 1

更新：Bootstrap现在正式支持横卡了

我创建了一个功能及时请求：https://github.com/twbs/bootstrap/issues/20794。现在 Bootstrap 支持并记录了横向卡片。

Bootstrap 实现基于网格和实用程序的组合类:

<div class="card mb-3" style="max-width: 540px;">
  <div class="row no-gutters">
    <div class="col-md-4">
      <img src="..." class="card-img" alt="...">
    </div>
    <div class="col-md-8">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
      </div>
    </div>
  </div>
</div>

该解决方案实际上与我使用的几乎相同。您可能仍然需要进行一些小的调整才能使其按照您的意愿工作，文档中也有说明："Further adjustments may be needed depending on your card content".

原回答

我找到了一种方法，使用背景大小：封面。我不得不使用 div 而不是 img 但除此之外这个解决方案有效，在我的情况下 img 不是那么必要。仍然欢迎其他解决方案。

我稍微修改了我的html：

<section>
  <div class="container">
    <div class="card">
      <div class="row">
        <div class="col-md-6">
          <div class="card-block">
            <h4 class="card-title">Curabitur gravida vestibulum imperdiet.</h4>
            <p class="card-text">Cras convallis ut turpis vitae facilisis. Morbi eu augue vel quam efficitur rhoncus vitae eget lectus. Cras augue ligula, aliquam ut enim ut, feugiat imperdiet sem. Integer sed mi quis nisl eleifend interdum.</p>
            <p class="card-text">Cras convallis ut turpis vitae facilisis. Morbi eu augue vel quam efficitur rhoncus vitae eget lectus. Cras augue ligula, aliquam ut enim ut, feugiat imperdiet sem.</p>
            <a href="#" class="btn btn-primary">Read More</a>
          </div>
        </div>
        <div class="col-md-6">
          <div class="card-img-bottom">
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

对于card-img-bottom，我设置的样式：

.card-img-bottom {
  color: #fff;
  height: 20rem;
  background: url(images/img1.jpg) center no-repeat;
  background-size: cover;
}

并且在桌面视图中，我将高度更改为 100%，因此高度始终与卡片块的高度相同。

由于 Bootstrap 默认填充，桌面视图中的 card-block 和 card-img-bottom 之间仍有一些额外的填充。因此，白色区域比图像略大。对我来说，这不是问题，所以我没有删除它们。

Answer 2

我找到了一个解决方案，图像高度有问题，但那是另一个问题......：P

好的，重新发明已经准备好的东西的最大问题是，当我们需要原始功能时，解决方案往往会出现问题，所以在我的解决方案中，我们只是添加了一个 class，这会起作用与其他情况一起使用了 class，因此如果 "card-img-left" class 存在，则 "card-budy" class 的左边距将与左对齐图像，如果 class 不存在，则此边距将是原始图像。这是一个可行的解决方案，不会破坏原来的系统，但必须对其进行完善...

 .card {
      overflow: hidden;
  }

    .card-img-left {
        position: absolute;
        height: auto;
        max-height: 100%;
        width: auto;
        max-width: 40%;
    }

    .card-img-left ~ .card-body {
        margin-left: 40%;
    }

Bootstrap/flexbox 卡片：将图像移动到桌面上的 left/right 侧

Bootstrap/flexbox card: move image to left/right side on desktop

html

css

responsive-design

twitter-bootstrap

bootstrap-4