使用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

我不确定您是否真的很熟悉Bootstrap，但是在标记中，您尚未指定您想要的每个Divs的列数。Bootstrap的网格系统由12列制成，因此您必须指定需要占用多少。在这种情况下，您会做类似：

的事情

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

这仅在Bootrap网格中的12列中有4个，您可以将其他8用于Image Div。

在Bootstrap 4中，我相信您的格式化方式意味着每个DIV的一半空间本质上意味着它等效于每列。