前提・実現したいこと
bootstrap4を使用して、htmlページを作成しております。
グリッドやブレークポイントについて、解決できない問題があります。
カラム落ち?を利用して、レスポンシブなものを作成中です。
新着情報を表示させるようなものなのですが、
<div class="col-6 col-lg-3 col-md-4">というような感じで、私が実現したいものは以下のようになります。
スマホ閲覧時には、iphone6/7/8
■■
■■
■■
■■
タブレットでは 768px
■■■
■■■
■■
PCでは
■■■■
■■■■
といった形にしたいです。
chromeのデベロッパツールで確認したところ、スマホ時のcol-6 が想定外の動作で、タブレットで想定している表記になってしまいます。
該当のソースコード
<div class="row"> <div class="col-6 col-lg-3 col-md-4"> <image class="news-image" src="../images/image1.jpg"></image> <h6>text</h6> <p> テキストテキストテキストテキストテキスト </p> </div> <div class="col-6 col-lg-3 col-md-4"> <image class="news-image" src="../images/image2.jpg"> <h6>text</h6> <p>テキストテキストテキストテキストテキスト</p> </image> </div> <div class="col-6 col-lg-3 col-md-4"> <image class="news-image" src="../images/image3.jpg"> <h6>テキスト</h6> <p>テキストテキストテキスト</p> </image> </div> <div class="col-6 col-lg-3 col-md-4"> <image class="news-image" src="../images/image4.jpg"> <h6>テキスト</h6> <p>テキストテキストテキストテキスト</p> </image> </div> <div class="col-6 col-lg-3 col-md-4"> <image class="news-image" src="../images/image5.jpg"></image> <h6>テキスト</h6> <p> テキストテキストテキストテキスト </p> </div> <div class="col-6 col-lg-3 col-md-4"> <image class="news-image" src="../images/image6.jpg"> <h6>テキスト</h6> <p>テキストテキストテキスト</p> </image> </div> <div class="col-6 col-lg-3 col-md-4"> <image class="news-image" src="../images/image7.jpg"> <h6>テキスト</h6> <p>テキストテキストテキストテキスト</p> </image> </div> <div class="col-6 col-lg-3 col-md-4"> <image class="news-image" src="../images/image8.jpg"> <h6>テキスト</h6> <p>テキストテキストテキストテキストテキスト</p> </image> </div> </div>image 要素はありません。書き直して確認してみてはどうでしょうか?
https://developer.mozilla.org/ja/docs/Web/HTML/Element/image
回答1件
あなたの回答
tips
プレビュー