使用 Bootstrap 4 将图像与标题的底部边框垂直对齐

Question

我正在开发一个网站，我使用 Bootstrap 行和列分隔一侧的文本和另一侧的图像。

我的 HTML 文件中有以下布局：

<div class="row">
    <div class="col-sm">
        <h1>This is a very long header with underline</h1>
        <h3>This is a subheader</h3>
        <p>This is a description</p>
    </div>
    <div class="col-sm">
        <figure class="figure">
            <img src="/assets/contentImage4.jpg" alt="Placeholder" class="img-fluid img-thumbnail content-image">
            <figcaption class="figure-caption">A caption for the above image.</figcaption>
        </figure>
    </div>
</div>

这是相关的 CSS：

.figure {
  display: block;
  margin: auto;
  margin-top: 45px;
  margin-bottom: 45px;
  width: 40%;
  text-align: center;
}

h1, h2 {
  font-family: 'Work Sans', sans-serif;
  border-bottom: 4px solid black;
}

我已将图形的上边距偏移 45 像素，以使图像的顶部与 h1 下方的黑色下划线对齐。然而，在长标题（如本例中）上，h1 换行占据两行，这意味着照片不再排列。有没有办法让它以编程方式适应 h1 的包装方式？

Answer 1

我不确定您是否真的熟悉引导程序，但在您的标记中您没有指定您希望每个 div 占用的列数。 Bootstrap 的 Grid 系统由 12 列组成，因此您必须指定需要占用多少列。 在这种情况下，您会执行以下操作：

<div class="col-sm-4">

这仅占用了引导网格中 12 列中的 4 列，您可以将其他 8 列用于图像 div。

在 Bootstrap 4 中，我相信您格式化它的方式意味着每个 div 将占用一半空间，基本上意味着它相当于每个 6 列。