Q&A
- 実現したいことは何か
https://gyazo.com/255cc2c502284dd6aeadb6f867be0c51
上記のようなレイアウトにしたい
- 対象のソースコード
<div class="container"> <div class="row"> <div class="col-md-10"> <div class="row"> <h6>新着写真投稿</h6> </div> <div class="row"> <div class="col-md-2 mx-auto"> <img src="#" class="my-3 " height="130px" width="120px"> <p class="mb-1">投稿者</p> <p>日付</p> </div> <div class="col-md-2 mx-auto"> <img src="#" class="my-3 " height="130px" width="120px"> <p class="mb-1">投稿者</p> <p>日付</p> </div> <div class="col-md-2 mx-auto"> <img src="#" class="my-3 " height="130px" width="120px"> <p class="mb-1">投稿者</p> <p>日付</p> </div> <div class="col-md-2 mx-auto"> <img src="#" class="my-3 " height="130px" width="120px"> <p class="mb-1">投稿者</p> <p>日付</p> </div> <div class="col-md-2 mx-auto"> <img src="#" class="my-3 mx-2" height="130px" width="120px"> <p class="mb-1">投稿者</p> <p>日付</p> </div> </div> </div> <div class="col-md-2 order-md-2 mx-auto ml-md-auto"> <img src="#" class="my-3 ml-2" height="130px" width="140px"> <div class="text-center"> <p class="my-0 mx-auto">アカウント名</p><br> <a href="#" class="mx-auto my-2">プロフィール編集</a><br><br> <a href="#" class="mx-auto my-2">ペット一覧</a><br><br> <a href="#" class="mx-auto my-2">アカウント削除</a> </div> </div> </div> <div class="row"> <div class="col-auto mt-3"> <p class="mb-0">新着トピック</p> </div> </div> <div class="row"> <table class="table col-md-10"> <tr> <th>ID</th> <th>タイトル</th> <th>本文</th> <th>投稿者名</th> </tr> <tr> <td>1</td> <td>タイトル１</td> <td>本文が入ります。本文が入ります。本文が入ります。本文が入ります。</td> <td>投稿太郎</td> </tr> </table> </div> </div>
環境
・bootstrap:4.0.0
・Cloud9
現在新着- 実現したいことは何か
https://gyazo.com/255cc2c502284dd6aeadb6f867be0c51
上記のようなレイアウトにしたい
- 対象のソースコード
<div class="container"> <div class="row"> <div class="col-md-10"> <div class="row"> <h6>新着写真投稿</h6> </div> <div class="row"> <div class="col-md-2 mx-auto"> <img src="#" class="my-3 " height="130px" width="120px"> <p class="mb-1">投稿者</p> <p>日付</p> </div> <div class="col-md-2 mx-auto"> <img src="#" class="my-3 " height="130px" width="120px"> <p class="mb-1">投稿者</p> <p>日付</p> </div> <div class="col-md-2 mx-auto"> <img src="#" class="my-3 " height="130px" width="120px"> <p class="mb-1">投稿者</p> <p>日付</p> </div> <div class="col-md-2 mx-auto"> <img src="#" class="my-3 " height="130px" width="120px"> <p class="mb-1">投稿者</p> <p>日付</p> </div> <div class="col-md-2 mx-auto"> <img src="#" class="my-3 mx-2" height="130px" width="120px"> <p class="mb-1">投稿者</p> <p>日付</p> </div> </div> </div> <div class="col-md-2 order-md-2 mx-auto ml-md-auto"> <img src="#" class="my-3 ml-2" height="130px" width="140px"> <div class="text-center"> <p class="my-0 mx-auto">アカウント名</p><br> <a href="#" class="mx-auto my-2">プロフィール編集</a><br><br> <a href="#" class="mx-auto my-2">ペット一覧</a><br><br> <a href="#" class="mx-auto my-2">アカウント削除</a> </div> </div> </div> <div class="row"> <div class="col-auto mt-3"> <p class="mb-0">新着トピック</p> </div> </div> <div class="row"> <table class="table col-md-10"> <tr> <th>ID</th> <th>タイトル</th> <th>本文</th> <th>投稿者名</th> </tr> <tr> <td>1</td> <td>タイトル１</td> <td>本文が入ります。本文が入ります。本文が入ります。本文が入ります。</td> <td>投稿太郎</td> </tr> </table> </div> </div>
環境
・bootstrap:4.0.0
・Cloud9
現在新着写真一覧と新着トピックの幅が合わず、アカウント部分と新着写真一覧が一つの塊として表示されています。
レイアウト通りにするにはどう書くべきでしょうか？
回答1件
0
ベストアンサー
現状のコードは下記のように、新着写真ブロックとアカウントブロックが一つのrowブロック内にありますので、当然、「アカウント部分と新着写真一覧が一つの塊として表示」されます。
html
1<div class="container"> 2 <div class="row"> 3 <div class="col-md-10"> 4 新着写真ブロック 5 </div> 6 <div class="col-md-2 order-md-2 mx-auto ml-md-auto"> 7 アカウントブロック 8 </div> 9 </div> 10 <div class="row"> 11 新着トピックブロック 12 </div> 13</div>
下記のように新着写真ブロックと新着トピックブロックが同じカラムブロックに入るような構成に変更してください。
html
1<div class="container"> 2 <div class="row"> 3 <div class="col-md-10"> 4 <div class="row"> 5 新着写真ブロック 6 </div> 7 <div class="row"> 8 新着ブロック 9 </div> 10 </div> 11 <div class="col-md-2 order-md-2 mx-auto ml-md-auto"> 12 アカウントブロック 13 </div> 14 </div> 15</div>
投稿2020/08/24 21:30
総合スコア34075
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/08/25 03:40