使用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，但是在標記中您沒有指定要讓每個div占用的列數。 Bootstrap的Grid系統由12列組成，因此您必須指定需要占用的數量。 在這種情況下，您將執行以下操作：

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

這僅占bootrap網格中12列中的4列，您可以將其他8列用於image div。

我相信在Bootstrap 4中，格式化的方式意味着每個div都將占用一半的空間，這實際上意味着每個div都相當於6列。