Bootstrapのグリットスタイルで、cardや画像などの横並びコンテンツで、それぞれの高さが違う場合に、高さ指定しないでカラム同士の高さを揃える方法
css関連記事
レスポンシブ対応がカンタンに!CSS aspect-ratioプロパティの使い方
jQuery UIのsortableを使ってリストをドラッグで並び替える
HTMLのsvgタグとJavaScriptで円グラフの画像をつくる
select・optionタグをjQueryで、プルダウンの選択値を取得、変更する
placeholderを見やすく!jQuery+css3でつくるフローティングラベル
効率よくセレクタを指定してcss効かせるサンプル!21選
楽天スマホで使える!classを使わずにcssを適用する裏技
cssのkeyframesで画像に動きや変化のアニメーションをつけるサンプル10選
cssで要素に動きや変化をアニメーションでつける、keyframesの使い方
カラム同士の高さを揃える
html
<div class="container"> <div class="row"> <div class="col-xs-12 col-sm-9"> text...<br>text...<br>text...<br>text...<br>text...<br>text...<br>text...<br>text...<br> </div> <div class="col-xs-12 col-sm-3"> text... </div> </div> </div>
こんな感じでレイアウトしているときにカラム同士の高さが合わなくて困ったので
以下の方法で高さを揃えた。
htmlのrowにclassとstyleを追加
html
<div class="row row-eq-height">
高さを揃えたい要素達の親要素にrow-eq-heightのクラスを付与します。
次にcssを追加。
css
.row-eq-height { display: flex; flex-wrap: wrap; }
これで要素達の高さが揃います。
Bootstrap4を使う
Bootstrap4を使うとそもそもこの現象が起きなかったので、変更できるのであれば変更したほうが楽ですね。
コメント