質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Q&A

解決済

1回答

275閲覧

Bootstrap4 のColumn Heightについて

keykon

総合スコア12

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

0グッド

1クリップ

投稿2018/11/01 02:09

編集2018/11/01 05:59

前提・実現したいこと

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行目のみオレンジ色のカラムがあるレイアウトにしたいと考えております。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

x_x

2018/11/01 04:33

何を問題にしているのかわからないので図示してもらえるでしょうか?
keykon

2018/11/01 06:00

ご指摘ありがとうございます。またわかりづらい内容で申し訳ございません。図を追加しましたので、ご参照いただけると幸いです。
guest

回答1

0

ベストアンサー

Bootstrap の Grid system は、名前に反して実体は Flexbox なので、図のようなレイアウトにはなりません。
flex-column を使ってこのように記述すれば近いものが得られます。

HTML

1 <div class="d-flex flex-column flex-wrap" style="height: 22em;"> 2 <section class="bg-primary">Hellow, Hellow, Hellow, </section> 3 <section class="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> 4 <section class="bg-success">Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, </section> 5 <section class="bg-dark">Hellow, Hellow, Hellow, </section> 6 <section class="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> 7 <section class="bg-secondary">Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, </section> 8 </div>

内容によって自動的にということになると、段組みレイアウトがいいでしょう。
Bootstrap は対応していないので、CSS を書くことになります。

HTML

1 <div style="column-count: 3; column-gap: 0;"> 2 <section class="bg-primary">Hellow, Hellow, Hellow, </section> 3 <section class="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> 4 <section class="bg-success">Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, </section> 5 <section class="bg-dark">Hellow, Hellow, Hellow, </section> 6 <section class="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> 7 <section class="bg-secondary">Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, Hellow, </section> 8 </div>

https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Multi-column_Layout

投稿2018/11/01 08:45

x_x

総合スコア13749

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

keykon

2018/11/05 07:40

Grid systemについてのご教授ありがとうございます。 代替え案のご提案も併せてありました。 こちら参考にさせていただきたいと存じます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問