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

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

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

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Bootstrap

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

解決済

Bootstrapのカード(横並び)の高さを揃える方法について質問です。

manmaru
manmaru

総合スコア0

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Bootstrap

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

1回答

0評価

0クリップ

98閲覧

投稿2019/07/20 14:37

引用テキストBootstrapのカードを横並びにしています。

現在、各カードの文章量によって高さがまちまちなのですが、
すべて同じ高さ(文章量の多いものの高さに揃える)ようにしたいです。

調べたところ、2つの方法を試したのですが、どちらも高さが統一されず、、
教えていただけますと大変助かります。

【その1】
参考サイト:https://qiita.com/chii/items/8e2d0d04d02f3fecebce
<html>
col-* クラスを指定している一つ上の要素に「row-eq-height」を追加

css

<CSS> .row-eq-height { display: flex; flex-wrap: wrap; }

【その2】
<CSS>
.card_topicにmin-height:300px;と記載。
(300pxあれば足りそうだったので。)

私が書いているコードは下記の通りです。

html

<div class="card-deck row row-eq-height"> <div class="card col-xs-6 col-lg-3 card_topic" style="width: 18rem;">    <img src="images/Mug-Mockup.jpg" class="card-img-top img-fluid" alt="...">    <div class="card-body">     <h5 class="card-title">"あいう"</h5>     <p class="card-text">ららららら</p>       ×4          </div> </div> </div>

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Bootstrap

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。