Bootstrapでメインカラムとサイドバーのレイアウトが上手く設定出来ない。

Question

Bootstrapでメインカラム（カード）とサイドバーを分けたいです。

<div class="wrapper">
  <div class="album py-5">
    <div class="container">
      <div class="row">
        <main class="col-md-8">
        <div class="col-md-4 py-2">
          <div class="card h-100">
            <div class="card-body">
              <p class="card-title">テスト1</p>
            </div>
          </div>
        </div>
        <div class="col-md-4 py-2">
          <div class="card h-100">
            <div class="card-body">
              <p class="card-title">テスト2</p>
            </div>
          </div>
        </div>
        <div class="col-md-4 py-2">
          <div class="card h-100">
            <div class="card-body">
              <p class="card-title">テスト3</p>
            </div>
          </div>
        </div>
      </main>
      <aside class="col-md-4">
        <p class="card-title">サイドバー</p>
      </aside>
      </div>
    </div>
  </div>
</div>

私のイメージとしては、カードが二つ並び、その横にサイドバーがくるイメージなのですが、実際は画像の様になっていしまいます。

グリッドシステムをきちんと理解できていない部分もあるかもしれませんが、どなたかアドバイスいただけると助かります。

Answer 1

こんにちは。

カードが二つ並び、その横にサイドバーがくるイメージ

3つめのカードは折り返す、ということでいいですか？

Bootstrapのグリッドシステムは、row が親にあることが前提です。
ですので、col を入れ子にするならば、row も入れ子にする必要があります。
また、その場合は12分割がリセットされますので、2つで折り返したいならばcol-4ではなくてcol-6です。

        <main class="col-md-8">
        <div class="col-md-4 py-2">

↓

        <main class="col-md-8 row">
        <div class="col-md-6 py-2">