前提・実現したいこと
BootStrapのグリッドレイアウトで1行目の要素の高さを始点に、
2列目のカラムを配置したいです。
発生している問題・エラーメッセージ
1行目の要素の下が空白になり、
行の中で一番高さの持つ要素から、2行目が配置されてしまいます。
該当のソースコード
HTML
1<!doctype html> 2<html lang="jp"> 3 <head> 4 <!-- Required meta tags --> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 7 8 <!-- Bootstrap CSS --> 9 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> 10 11 <title>Hello, world!</title> 12 </head> 13 <body> 14 <div class="container"> 15 <div class="row align-items-start"> 16 <section class="col-4 bg-primary">Hellow, Hellow, Hellow, </section> 17 <Section class="col-4 bg-info">Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, </section> 18 <section class="col-4 bg-success">Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, </section> 19 </div> 20 <div class="row align-items-start"> 21 <section class="col-4 align-items-center bg-dark">Hellow, Hellow, Hellow, </section> 22 <Section class="col-4 bg-warning">Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, </section> 23 <section class="col-4 bg-secondary">Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, </section> 24 </div> 25 </div> 26 <!-- Optional JavaScript --> 27 <!-- jQuery first, then Popper.js, then Bootstrap JS --> 28 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> 29 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> 30 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> 31 </body> 32</html>
試したこと
交差軸方向のアイテムの整列のalign-items-start
を用いて1行目の要素を上詰めに配置しました。
調べたところBootstrap3では、上の要素に合わせて上詰めになっていたようですが、
手もとでは確認できておりません。
初歩的な質問で恐縮ですが、何卒ご教授いただけないでしょうか。
よろしくお願いいたします。
図表
実現したいレイアウトの図を追加しました。
赤線が行の目安で3行目のみオレンジ色のカラムがあるレイアウトにしたいと考えております。
回答1件
あなたの回答
tips
プレビュー