ブートストラップ4を使用して画像を縦にヘッダーの下端と整列させます。

Question

私は、一方の側でテキストを分離し、ブートストラップの行と列を使用して他方の画像を分離したWebサイトを開発しています。

I持って私の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：私はのトップを取得するために45個のピクセルでフィギュアのトップマージンを相殺している

.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; 
} 

h1の下にある黒い下線に合わせる画像。しかし、長いタイトル（この場合のような）では、h1が2行を囲むように折り返します。これは、写真がもう整列していないことを意味します。 h1がラップしている方法に基づいてこれをプログラム的に適合させる方法はありますか？

Answer 1

あなたが実際にブートストラップに精通しているが、あなたのマークアップであなたのdivのそれぞれに必要なカラム数を指定していないかどうかはわかりません。 ブートストラップのグリッドシステムは12列で構成されているため、占有する必要がある数を指定する必要があります。あなたのようなものだろう。この場合 ：

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

これはちょうどあなたがイメージのdivのために他の8を使用することができ、bootrapグリッドに12列の4を取りました。

ブートストラップ4では、書式設定の仕方によって、各divがスペースの半分を占めることが基本的には6列に相当することを意味します。