Q&A
「上手くいきません」とのことですが、どのようなコードでどのように上手くいかなかったのでしょうか？
お世話になります。Bootstrap4にて画像は場に応じてレイアウトを変えているのですが、画面幅に応じてスクロールバーを縦から横に返るのはどうしたら良いのでしょうか？
回りくどい説明になるかもしれませんが、何処名に影響するところがあると困るので、全体のレイアウトも含めてご説明すると、
PCの場合は、
の配置となり、幅を狭めていくと、
といったレイアウトを実装しています。
この時のソースはこちら
<main role="main"> <div class="container mt-5 py-4 text-left"> <div class="row"> <div class="col-12"> <h4 style="color:#960F51;">タイトル</h4> </div> </div> <div class="row my-2"> <div class="col-lg-9 order-lg-2"> <div class="row"> <div class="col-md-6 py-3"> Bエリア Bエリア Bエリア Bエリア Bエリア Bエリア </div> <div class="col-md-6 py-3"> Cエリア Cエリア Cエリア Cエリア Cエリア Cエリア </div> </div> </div> <!--作品一覧ブロック--> <div class="col-lg-3 py-5 small"> Aエリア Aエリア Aエリア Aエリア Aエリア Aエリア Aエリア Aエリア </div> <!--作品一覧ブロック--> </div> </div><!-- /container --> </main>
前置きが長くなりましたが、この度、Aアリアにおいて、画像と画像名そしてその説明を、PCでのアクセス時は1列で縦長に表示し縦スクロール、
スマホでアクセスしたときは、1行で横スクロールにしたいと考えていますが、上手くいきません。
しかも、当たり前なのか、画像とタイトルその説明を１つのグリッド？（class名rowで括っている）で扱うと、3つの画像が並んだあと改行されてしまうほどです。
お忙しい中恐縮ですが、アドバイスのほど頂戴出来たら幸いです。
よろしくお願いいたします。
■追記 現在試しているソースをそのまま書き残します。上記ソースに「Aエリア」と記載のある部分が入れ替わっている状況です。
1案
<main role="main"> <div class="container mt-5 py-4 text-left"> <div class="row"> <div class="col-12"> <h4 style="color:#960F51;">タイトル</h4> </div> </div> <div class="row my-2"> <div class="col-lg-9 order-lg-2"> <div class="row"> <div class="col-md-6 py-3"> Bエリア Bエリア Bエリア Bエリア Bエリア Bエリア </div> <div class="col-md-6 py-3"> Cエリア Cエリア Cエリア Cエリア Cエリア Cエリア </div> </div> </div> <!--作品一覧ブロック--> <div class="col-lg-3 py-5 small"> <div style="height: 20%; overflow-y: scroll;"> <div class="row"> <div class="col col-lg-12"> <div class="row"> <div class="col-12 col-lg-4">画像</div> <div class="col-12 col-lg-8">作品名<br />作家名<br/>ESTIMATE</div> </div> </div> <div class="col col-lg-12"> <div class="row"> <div class="col-12 col-lg-4">画像</div> <div class="col-12 col-lg-8">作品名<br />作家名<br/>ESTIMATE</div> </div> </div> <div class="col col-lg-12"> <div class="row"> <div class="col-12 col-lg-4">画像</div> <div class="col-12 col-lg-8">作品名<br />作家名<br/>ESTIMATE</div> </div> </div> <div class="col col-lg-12"> <div class="row"> <div class="col-12 col-lg-4">画像</div> <div class="col-12 col-lg-8">作品名<br />作家名<br/>ESTIMATE</div> </div> </div> <div class="col col-lg-12"> <div class="row"> <div class="col-12 col-lg-4">画像</div> <div class="col-12 col-lg-8">作品名<br />作家名<br/>ESTIMATE</div> </div> </div> <div class="col col-lg-12"> <div class="row"> <div class="col-12 col-lg-4">画像</div> <div class="col-12 col-lg-8">作品名<br />作家名<br/>ESTIMATE</div> </div> </div> <div class="col col-lg-12"> <div class="row"> <div class="col-12 col-lg-4">画像</div> <div class="col-12 col-lg-8">作品名<br />作家名<br/>ESTIMATE</div> </div> </div> <div class="col col-lg-12"> <div class="row"> <div class="col-12 col-lg-4">画像</div> <div class="col-12 col-lg-8">作品名<br />作家名<br/>ESTIMATE</div> </div> </div> <div class="col col-lg-12"> <div class="row"> <div class="col-12 col-lg-4">画像</div> <div class="col-12 col-lg-8">作品名<br />作家名<br/>ESTIMATE</div> </div> </div> <div class="col col-lg-12"> <div class="row"> <div class="col-12 col-lg-4">画像1</div> <div class="col-12 col-lg-8">作品名1<br />作家名1<br/>ESTIMATE1</div> </div> </div> <div class="col col-lg-12"> <div class="row"> <div class="col-12 col-lg-4">画像2</div> <div class="col-12 col-lg-8">作品名2<br />作家名2<br/>ESTIMATE2</div> </div> </div> <div class="col col-lg-12"> <div class="row"> <div class="col-12 col-lg-4">画像3</div> <div class="col-12 col-lg-8">作品名3<br />作家名3<br/>ESTIMATE3</div> </div> </div> <div class="col col-lg-12"> <div class="row"> <div class="col-12 col-lg-4">画像</div> <div class="col-12 col-lg-8">作品名<br />作家名<br/>ESTIMATE</div> </div> </div> <div class="col col-lg-12"> <div class="row"> <div class="col-12 col-lg-4">画像</div> <div class="col-12 col-lg-8">作品名<br />作家名<br/>ESTIMATE</div> </div> </div> <div class="col col-lg-12"> <div class="row"> <div class="col-12 col-lg-4">画像</div> <div class="col-12 col-lg-8">作品名<br />作家名<br/>ESTIMATE</div> </div> </div> <div class="col col-lg-12"> <div class="row"> <div class="col-12 col-lg-4">画像</div> <div class="col-12 col-lg-8">作品名<br />作家名<br/>ESTIMATE</div> </div> </div> <div class="col col-lg-12"> <div class="row"> <div class="col-12 col-lg-4">画像</div> <div class="col-12 col-lg-8">作品名<br />作家名<br/>ESTIMATE</div> </div> </div> <div class="col col-lg-12"> <div class="row"> <div class="col-12 col-lg-4">画像</div> <div class="col-12 col-lg-8">作品名<br />作家名<br/>ESTIMATE</div> </div> </div> </div> </div> </div> <!--作品一覧ブロック--> </div> </div><!-- /container --> </main>
案２
<main role="main"> <div class="container mt-5 py-4 text-left"> <div class="row"> <div class="col-12"> <h4 style="color:#960F51;">タイトル</h4> </div> </div> <div class="row my-2"> <div class="col-lg-9 order-lg-2"> <div class="row"> <div class="col-md-6 py-3"> Bエリア Bエリア Bエリア Bエリア Bエリア Bエリア </div> <div class="col-md-6 py-3"> Cエリア Cエリア Cエリア Cエリア Cエリア Cエリア </div> </div> </div> <!--作品一覧ブロック--> <div class="col-lg-3 py-5 small"> <div class="table-responsive vh-100 clearfix list-box px-2" style="overflow-y:scroll;"> <table class="table"> <tr> <td style="width:100px;"> <div class="row"> <div class="col-12 col-lg-5"><img src="/images/sample.jpg" class="w-100"></div> <div class="col-12 col-lg-7">作品名1<br />作家名1<br/>ESTIMATE1</div> </div> </td> <td style="width:100px;"> <div class="row"> <div class="col-12 col-lg-5"><img src="/images/sample.jpg" class="w-100"></div> <div class="col-12 col-lg-7">作品名1<br />作家名1<br/>ESTIMATE1</div> </div> </td> <td style="width:100px;"> <div class="row"> <div class="col-12 col-lg-5"><img src="/images/sample.jpg" class="w-100"></div> <div class="col-12 col-lg-7">作品名1<br />作家名1<br/>ESTIMATE1</div> </div> </td> <td style="width:100px;"> <div class="row"> <div class="col-12 col-lg-5"><img src="/images/sample.jpg" class="w-100"></div> <div class="col-12 col-lg-7">作品名1<br />作家名1<br/>ESTIMATE1</div> </div> </td> <td style="width:100px;"> <div class="row"> <div class="col-12 col-lg-5"><img src="/images/sample.jpg" class="w-100"></div> <div class="col-12 col-lg-7">作品名1<br />作家名1<br/>ESTIMATE1</div> </div> </td> <td style="width:100px;"> <div class="row"> <div class="col-12 col-lg-5"><img src="/images/sample.jpg" class="w-100"></div> <div class="col-12 col-lg-7">作品名1<br />作家名1<br/>ESTIMATE1</div> </div> </td> </tr> </table> </div> </div> <!--作品一覧ブロック--> </div> </div><!-- /container --> </main>
Lhankor_Mhyさん
コメントありがとうございます。お恥ずかしものと思いながら、現在試している記述をそのまま掲載しました。アドバイスいただけたら幸いです。
回答1件
0
ベストアンサー
折り返しを設定すればいいかと思います。
コンテナ内でどのように折り返すかを変更できます。
.flex-nowrap : 折り返しなし .flex-wrap : 折り返しあり .flex-wrap-reverse : 逆方向に折り返し
Flex - Bootstrap 4.2 - 日本語リファレンス
html
1 <div class="container mt-5 py-4 text-left"> 2 <div class="row"> 3 <div class="col-12"> 4 <h4 style="color:#960F51;">タイトル</h4> 5 </div> 6 </div> 7 <div class="row my-2"> 8 <div class="col-lg-9 order-lg-2"> 9 <div class="row"> 10 <div class="col-md-6 py-3"> 11 Bエリア Bエリア Bエリア Bエリア Bエリア Bエリア 12 </div> 13 <div class="col-md-6 py-3"> 14 Cエリア Cエリア Cエリア Cエリア Cエリア Cエリア 15 </div> 16 </div> 17 </div> 18 <!--作品一覧ブロック--> 19 <div class="col-lg-3 py-5 small"> 20 <div style="height: 20%; overflow-y: scroll;"> 21 <div class="row no-gutters flex-nowrap flex-lg-wrap"> <!-- ここ --> 22 <div class="col col-lg-12"> 23 <div class="row no-gutters"> 24 <div class="col-12 col-lg-4">画像</div> 25 <div class="col-12 col-lg-8">作品名<br />作家名<br />ESTIMATE</div> 26 </div> 27 </div> 28 <div class="col col-lg-12"> 29 <div class="row no-gutters"> <!-- ここ --> 30 <div class="col-12 col-lg-4">画像</div> 31 <div class="col-12 col-lg-8">作品名<br />作家名<br />ESTIMATE</div> 32 </div> 33 </div> 34 <div class="col col-lg-12"> 35 <div class="row no-gutters"> <!-- ここ --> 36 <div class="col-12 col-lg-4">画像</div> 37 <div class="col-12 col-lg-8">作品名<br />作家名<br />ESTIMATE</div> 38 </div> 39 </div> 40 <div class="col col-lg-12"> 41 <div class="row no-gutters"> <!-- ここ --> 42 <div class="col-12 col-lg-4">画像</div> 43 <div class="col-12 col-lg-8">作品名<br />作家名<br />ESTIMATE</div> 44 </div> 45 </div> 46 <div class="col col-lg-12"> 47 <div class="row no-gutters"> <!-- ここ --> 48 <div class="col-12 col-lg-4">画像</div> 49 <div class="col-12 col-lg-8">作品名<br />作家名<br />ESTIMATE</div> 50 </div> 51 </div> 52 <div class="col col-lg-12"> 53 <div class="row no-gutters"> <!-- ここ --> 54 <div class="col-12 col-lg-4">画像</div> 55 <div class="col-12 col-lg-8">作品名<br />作家名<br />ESTIMATE</div> 56 </div> 57 </div> 58 <div class="col col-lg-12"> 59 <div class="row no-gutters"> <!-- ここ --> 60 <div class="col-12 col-lg-4">画像</div> 61 <div class="col-12 col-lg-8">作品名<br />作家名<br />ESTIMATE</div> 62 </div> 63 </div> 64 <div class="col col-lg-12"> 65 <div class="row no-gutters"> <!-- ここ --> 66 <div class="col-12 col-lg-4">画像</div> 67 <div class="col-12 col-lg-8">作品名<br />作家名<br />ESTIMATE</div> 68 </div> 69 </div> 70 <div class="col col-lg-12"> 71 <div class="row no-gutters"> <!-- ここ --> 72 <div class="col-12 col-lg-4">画像</div> 73 <div class="col-12 col-lg-8">作品名<br />作家名<br />ESTIMATE</div> 74 </div> 75 </div> 76 <div class="col col-lg-12"> 77 <div class="row no-gutters"> <!-- ここ --> 78 <div class="col-12 col-lg-4">画像1</div> 79 <div class="col-12 col-lg-8">作品名1<br />作家名1<br />ESTIMATE1</div> 80 </div> 81 </div> 82 <div class="col col-lg-12"> 83 <div class="row no-gutters"> <!-- ここ --> 84 <div class="col-12 col-lg-4">画像2</div> 85 <div class="col-12 col-lg-8">作品名2<br />作家名2<br />ESTIMATE2</div> 86 </div> 87 </div> 88 <div class="col col-lg-12"> 89 <div class="row no-gutters"> <!-- ここ --> 90 <div class="col-12 col-lg-4">画像3</div> 91 <div class="col-12 col-lg-8">作品名3<br />作家名3<br />ESTIMATE3</div> 92 </div> 93 </div> 94 <div class="col col-lg-12"> 95 <div class="row no-gutters"> <!-- ここ --> 96 <div class="col-12 col-lg-4">画像</div> 97 <div class="col-12 col-lg-8">作品名<br />作家名<br />ESTIMATE</div> 98 </div> 99 </div> 100 <div class="col col-lg-12"> 101 <div class="row no-gutters"> <!-- ここ --> 102 <div class="col-12 col-lg-4">画像</div> 103 <div class="col-12 col-lg-8">作品名<br />作家名<br />ESTIMATE</div> 104 </div> 105 </div> 106 <div class="col col-lg-12"> 107 <div class="row no-gutters"> <!-- ここ --> 108 <div class="col-12 col-lg-4">画像</div> 109 <div class="col-12 col-lg-8">作品名<br />作家名<br />ESTIMATE</div> 110 </div> 111 </div> 112 <div class="col col-lg-12"> 113 <div class="row no-gutters"> <!-- ここ --> 114 <div class="col-12 col-lg-4">画像</div> 115 <div class="col-12 col-lg-8">作品名<br />作家名<br />ESTIMATE</div> 116 </div> 117 </div> 118 <div class="col col-lg-12"> 119 <div class="row no-gutters"> <!-- ここ --> 120 <div class="col-12 col-lg-4">画像</div> 121 <div class="col-12 col-lg-8">作品名<br />作家名<br />ESTIMATE</div> 122 </div> 123 </div> 124 <div class="col col-lg-12"> 125 <div class="row no-gutters"> <!-- ここ --> 126 <div class="col-12 col-lg-4">画像</div> 127 <div class="col-12 col-lg-8">作品名<br />作家名<br />ESTIMATE</div> 128 </div> 129 </div> 130 </div> 131 </div> 132 </div> 133 <!--作品一覧ブロック--> 134 </div> 135 </div><!-- /container --> 136 </main>
投稿2021/12/06 07:10
総合スコア36115
Lhankor_Mhyさん
お忙しい中、ご親切なアドバイスをありがとうございました。
flex-*の件、初めて触りました・・。
勉強になります。ありがとうございました！
あなたの回答
tips
プレビュー
