Laravelを使った繰り返し表示でレイアウトが崩れる

こんにちは。

Laravelでウェブアプリケーションを作っています。

データベースの商品情報を一覧表示するページを作成しているのですが、繰り返し表示(show.blade.phpの☆部分)をしようとすると以下のように2番目以降の画像が左にずれてしまいます。2番目以降のカラムを1番上のカラムの位置に合わせたいです。cssが原因だと思うのですが、どこを直すのかがいまいちわからず質問させていただきました。
直し方をわかる方がいらっしゃいましたらご教示お願いいたします。
よろしくおねがいいたします。

画像

show.blade.php

php
1@extends('layouts.app')
2
3<!doctype html>
4<html lang="ja">
5
6<head>
7    <meta charset="UTF-8">
8    <link rel="stylesheet" href="{{'css/mypage_template.css'}}">
9</head>
10
11<body>
12    <!--our content goes here-->
13    <div class="container content">
14        <div class="row profile">
15            <div class="col-md-3">
16                <div class="profile-sidebar position-fixed border rounded">
17                    <!-- SIDEBAR USERPIC -->
18                    <div class="profile-userpic">
19                        <img src="https://media.rockstargames.com/chinatownwars/global/downloads/avatars/zhou_256x256.jpg" class="img-responsive" alt="">
20                    </div>
21                    <!-- END SIDEBAR USERPIC -->
22                    <!-- SIDEBAR USER TITLE -->
23                    <div class="profile-usertitle">
24                        <div class="profile-usertitle-name">
25                            Jason Davis
26                        </div>
27                        <div class="profile-usertitle-job">
28                            Developer
29                        </div>
30                    </div>
31                    <!-- END SIDEBAR USER TITLE -->
32                    <!-- SIDEBAR BUTTONS -->
33                    <div class="profile-userbuttons">
34                        <button type="button" class="btn btn-success btn-sm">Follow</button>
35                        <button type="button" class="btn btn-danger btn-sm">Message</button>
36                    </div>
37                    <!-- END SIDEBAR BUTTONS -->
38                    <!-- SIDEBAR MENU -->
39                    <div class="profile-usermenu sidebar-sticky">
40                        <ul class="nav flex-column">
41                            <li class="active nav-item">
42                                <a href="#" class="nav-link active">
43                                    <i class="fa fa-home"></i>
44                                    お問い合わせ </a>
45                            </li>
46                            <li class="nav-item">
47                                <a class="nav-link" href="https://codepen.io/jasondavis/pen/jVRwaG?editors=1000">
48                                    <i class="fa fa-user"></i>
49                                    お問い合わせ </a>
50                            </li>
51                            <li class="nav-item">
52                                <a class="nav-link" href="#" target="_blank">
53                                    <i class="fa fa-check"></i>
54                                    お問い合わせ </a>
55                            </li>
56                            <li class="nav-item">
57                                <a class="nav-link" href="#">
58                                    <i class="fa fa-flag"></i>
59                                    お問い合わせ </a>
60                            </li>
61                            <li class="nav-item">
62                                <a class="nav-link" href="#">
63                                    <i class="fa fa-flag"></i>
64                                    お問い合わせ </a>
65                            </li>
66                        </ul>
67                    </div>
68                    <!-- END MENU -->
69                </div>
70            </div>
71            @if(count($tests) > 0)   ☆
72            @foreach($tests as $test)
73            <div class="col-md-9">
74                <li class="list-group-item border rounded">
75                    <!-- Custom content-->
76                    <div class="media align-items-lg-center flex-column flex-lg-row p-3">
77                        <div class="media-body order-2 order-lg-1">
78                            <h5 class="mt-0 font-weight-bold mb-2">{{$test->name}}</h5>
79                            <p class="font-italic text-muted mb-0 small">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
80                                Suscipit fuga autem maiores necessitatibus.</p>
81                            <div class="d-flex align-items-center justify-content-between mt-1">
82                                <h6 class="font-weight-bold my-2">$120.00</h6>
83                                <ul class="list-inline small">
84                                    <li class="list-inline-item m-0"><i class="fa fa-star text-success"></i></li>
85                                    <li class="list-inline-item m-0"><i class="fa fa-star text-success"></i></li>
86                                    <li class="list-inline-item m-0"><i class="fa fa-star text-success"></i></li>
87                                    <li class="list-inline-item m-0"><i class="fa fa-star text-success"></i></li>
88                                    <li class="list-inline-item m-0"><i class="fa fa-star-o text-gray"></i></li>
89                                </ul>
90                            </div>
91                        </div><img src="https://res.cloudinary.com/mhmd/image/upload/v1556485076/shoes-1_gthops.jpg" alt="Generic placeholder image" width="200" class="ml-lg-5 order-1 order-lg-2">
92                    </div>
93                    <!-- End -->
94                </li>
95                <!-- End -->
96            </div>
97            @endforeach
98            @endif
99        </div>
100    </div>
101    
102</body>
103
104</html>

mypage_template.css

css
1html, body {
2    height: 100%;
3  }
4  body {
5    display: flex;
6    flex-direction: column;
7    background: #F1F3FA;
8  }
9  body { 
10    overflow-x:hidden;
11  }
12  #mainNav {
13    background-color: darkslategrey;
14    color:white;
15  }
16  #mainNav .navbar-brand {
17    color: #fed136;
18    font-family: 'Kaushan Script', 'Helvetica Neue', Helvetica, Arial, cursive;
19  }
20  
21  
22  .content {
23    flex: 1 0 auto;
24  }
25  .footer {
26    flex-shrink: 0;
27  }
28  
29  
30  footer {
31    text-align: center;
32    background-color: white;
33  }
34  .ft{
35    padding-left:22px;
36    padding-right:31px;
37  }
38  
39  footer span.copyright {
40    font-size: 90%;
41    line-height: 40px;
42    text-transform: none;
43    font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
44    color:blak;
45  }
46  
47  footer ul.quicklinks {
48    font-size: 90%;
49    line-height: 40px;
50    margin-bottom: 0;
51    text-transform: none;
52    font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
53  }
54  
55  ul.social-buttons {
56    margin-bottom: 0;
57  }
58  
59  ul.social-buttons li a {
60    font-size: 20px;
61    line-height: 40px;
62    display: block;
63    width: 40px;
64    height: 40px;
65    -webkit-transition: all 0.3s;
66    -moz-transition: all 0.3s;
67    transition: all 0.3s;
68    color: white;
69    border-radius: 100%;
70    outline: none;
71    background-color: #212529;
72  }
73  
74  ul.social-buttons li a:active, ul.social-buttons li a:focus, ul.social-buttons li a:hover {
75    background-color: #fed136;
76  }
77  .content{
78     margin-top:60px;
79   }
80  
81  
82  /* Profile container */
83  .profile {
84    margin: 20px 0;
85  }
86  
87  /* Profile sidebar */
88  .profile-sidebar {
89    padding: 20px 0 10px 0;
90    background: #fff;
91  }
92  
93  .profile-userpic img {
94    float: none;
95    display:block;
96      margin:auto;
97    width: 50%;
98    height: 50%;
99    -webkit-border-radius: 50% !important;
100    -moz-border-radius: 50% !important;
101    border-radius: 50% !important;
102  }
103  
104  .profile-usertitle {
105    text-align: center;
106    margin-top: 20px;
107  }
108  
109  .profile-usertitle-name {
110    color: #5a7391;
111    font-size: 16px;
112    font-weight: 600;
113    margin-bottom: 7px;
114  }
115  
116  .profile-usertitle-job {
117    text-transform: uppercase;
118    color: #5b9bd1;
119    font-size: 12px;
120    font-weight: 600;
121    margin-bottom: 15px;
122  }
123  
124  .profile-userbuttons {
125    text-align: center;
126    margin-top: 10px;
127  }
128  
129  .profile-userbuttons .btn {
130    text-transform: uppercase;
131    font-size: 11px;
132    font-weight: 600;
133    padding: 6px 15px;
134    margin-right: 5px;
135  }
136  
137  .profile-userbuttons .btn:last-child {
138    margin-right: 0px;
139  }
140      
141  .profile-usermenu {
142    margin-top: 30px;
143  }
144  
145  .profile-usermenu ul li {
146    border-bottom: 1px solid #f0f4f7;
147  }
148  
149  .profile-usermenu ul li:last-child {
150    border-bottom: none;
151  }
152  
153  .profile-usermenu ul li a {
154    color: #93a3b5;
155    font-size: 14px;
156    font-weight: 400;
157  }
158  
159  .profile-usermenu ul li a i {
160    margin-right: 8px;
161    font-size: 14px;
162  }
163  
164  .profile-usermenu ul li a:hover {
165    background-color: #fafcfd;
166    color: #5b9bd1;
167  }
168  
169  .profile-usermenu ul li.active {
170    border-bottom: none;
171  }
172  
173  .profile-usermenu ul li.active a {
174    color: #5b9bd1;
175    background-color: #f6f9fb;
176    border-left: 2px solid #5b9bd1;
177    margin-left: -2px;
178  }
179  
180  /* Profile Content */
181  .profile-content {
182    padding: 20px;
183    background: #fff;
184    min-height: 460px;
185  }
186  
187  .nav>li {
188      position: relative;
189      display: block;
190  }
191  
192  
193  
194  
195  
196  Resources

phper.k

2020/07/26 04:39

最終的にどう表現したいのかを示していないので、回答つかないと思いますよ

行動規範の内容に同意します

回答1件

ベストアンサー

diff
1
2            @if(count($tests) > 0)
3-            @foreach($tests as $test)
4-            <div class="col-md-9">
5+            <div class="col-md-9">
6+            @foreach($tests as $test)
7                <li class="list-group-item border rounded">
8                    <!-- Custom content-->
9                    <div class="media align-items-lg-center flex-column flex-lg-row p-3">
10                        <div class="media-body order-2 order-lg-1">
11                            <h5 class="mt-0 font-weight-bold mb-2">{{$test->name}}</h5>
12                            <p class="font-italic text-muted mb-0 small">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
13                                Suscipit fuga autem maiores necessitatibus.</p>
14                            <div class="d-flex align-items-center justify-content-between mt-1">
15                                <h6 class="font-weight-bold my-2">$120.00</h6>
16                                <ul class="list-inline small">
17                                    <li class="list-inline-item m-0"><i class="fa fa-star text-success"></i></li>
18                                    <li class="list-inline-item m-0"><i class="fa fa-star text-success"></i></li>
19                                    <li class="list-inline-item m-0"><i class="fa fa-star text-success"></i></li>
20                                    <li class="list-inline-item m-0"><i class="fa fa-star text-success"></i></li>
21                                    <li class="list-inline-item m-0"><i class="fa fa-star-o text-gray"></i></li>
22                                </ul>
23                            </div>
24                        </div><img src="https://res.cloudinary.com/mhmd/image/upload/v1556485076/shoes-1_gthops.jpg" alt="Generic placeholder image" width="200" class="ml-lg-5 order-1 order-lg-2">
25                    </div>
26                    <!-- End -->
27                </li>
28                <!-- End -->
29-            </div>
30-            @endforeach
31+            @endforeach
32+            </div>
33            @endif