拉拉维尔 6 |如何让我的最后 4 个帖子显示在索引中而不会弄乱页面?

Question

我目前正在用laravel 6制作一个新闻网站，但是当我动态查看帖子时，页面变得一团糟。

这就是它应该的样子(这是静态的(

这就是它动态的外观

我的错误索引文件如下：

@extends('layouts.layout')
@section('content')
<section id="main-header">
<div class="container mt-4">
<div class="row">
<div class="col-md-8">
<div class="bg-black text-white text-center">
<h1>De Seneste Nyheder</h1>
</div>
@foreach($posts as $post)
<div class="row">
<div class="col-md-6">
<div class="card">
<a href="{{route('article', $post->id)}}">
<img width="250" height="190" src="{{asset('img/1491602_w1.jpg')}}" alt=""
class="card-img-top">
<div class="card-body">
<h4 class="card-title">Inter Har Vundet CL!</h4>
</a>
<small class="text-muted"><i class="far fa-clock"></i> Posted 20 minutes ago</small>
<p class="card-text">
José Mourinho har fandme gjort det igen!. Inter er europæiske
mestre
igen efter 60 år!</p>
</div>
</div>
</div>
</div>
</div>
@endforeach
<div class="col-md-4">
<div class="bg-black text-white text-center d-none d-lg-block">
<h1>Sponsor</h1>
</div>
<h1>Sponsor Her</h1>
<br>
<div class="card  d-none d-lg-block" style="width: 18rem;">
<div class="card-header text-dark text-center">
Premier League Table
</div>
<table class="card-table table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Hold</th>
<th scope="col">K</th>
<th scope="col">P</th>
</tr>
</thead>
<tbody>
<tr class="bg-dark-blue">
<td>1</td>
<td><img height="25" width="25"
src="https://dxugi372p6nmc.cloudfront.net/ronaldo/current/64x64/8650/teamlogo.png"
alt="">
Liverpool
</td>
<td>22</td>
<td>64</td>
</tr>
<tr class="bg-dark-blue">
<td>2</td>
<td><img height="25" width="25"
src="https://dxugi372p6nmc.cloudfront.net/ronaldo/current/64x64/8456/teamlogo.png"
alt="">
Manchester City
</td>
<td>23</td>
<td>48</td>
</tr>
<tr class="bg-dark-blue">
<td>3</td>
<td><img height="25" width="25"
src="https://dxugi372p6nmc.cloudfront.net/ronaldo/current/64x64/8197/teamlogo.png"
alt="">
Leicester
</td>
<td>23</td>
<td>45</td>
</tr>
<tr class="bg-dark-blue">
<td>4</td>
<td><img height="25" width="25"
src="https://dxugi372p6nmc.cloudfront.net/ronaldo/current/64x64/8455/teamlogo.png"
alt="">
Chelsea
</td>
<td>23</td>
<td>39</td>
</tr>
<tr class="bg-dark-red">
<td>5</td>
<td>
<small><img height="25" width="25"
src="https://dxugi372p6nmc.cloudfront.net/ronaldo/current/64x64/10260/teamlogo.png"
alt=""> Manchester United
</small>
</td>
<td>23</td>
<td>34</td>
</tr>
<tr>
<td>6</td>
<td>Liverpool</td>
<td>20</td>
<td>64</td>
</tr>
<tr>
<td>7</td>
<td>Liverpool</td>
<td>20</td>
<td>64</td>
</tr>
<tr>
<td>8</td>
<td>Liverpool</td>
<td>20</td>
<td>64</td>
</tr>
<tr>
<td>9</td>
<td>Liverpool</td>
<td>20</td>
<td>64</td>
</tr>
<tr>
<td>10</td>
<td>Liverpool</td>
<td>20</td>
<td>64</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
<section id="last-news">
<div class="container">
<div class="row justify-content-start mb-3">
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
</div>
<div class="row justify-content-start">
<div class="col-md-4">
</div>
</div>
</section>
<section id="latest_rumors_header">
<div class="container mt-2">
<div class="row">
<div class="col-md-8">
<div class="bg-black text-white text-center">
<h1>De Seneste Transfer Rygter</h1>
</div>
</div>
<div class="col-md-4 d-none d-lg-block">
</div>
</div>
</div>
</section>
<section id="latest_rumors">
<div class="container mb-4">
<div class="row">
<div class="col-md-4">
<div class="card mb-3">
<div class="card-img-caption">
<a href="#">
<h4 class="card-text bg-black-opacity text-white">Quaresma til Fenerbahce?</h4>
<img width="250" height="180" class="card-img-top"
src="{{asset('img/quaresma-wme6-cover-Wcpu_cover.jpg')}}" alt="">
</a>
</div>
</div>
<div class="card">
<div class="card-img-caption">
<a href="#">
<h4 class="card-text bg-black-opacity text-white">Besiktas taler med Ronaldinho</h4>
<img width="250" height="180" class="card-img-top" src="{{asset('img/images.jpg')}}"
alt="">
</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-3">
<div class="card-img-caption">
<a href="#">
<h4 class="card-text bg-black-opacity text-white">Besiktas taler med Ronaldinho</h4>
<img width="250" height="180" class="card-img-top" src="{{asset('img/images.jpg')}}"
alt="">
</a>
</div>
</div>
<div class="card">
<div class="card-img-caption">
<a href="#">
<h4 class="card-text bg-black-opacity text-white">Besiktas taler med Ronaldinho</h4>
<img width="250" height="180" class="card-img-top" src="{{asset('img/images.jpg')}}"
alt="">
</a>
</div>
</div>
</div>
<div class="col-md-4">
</div>
</div>
</div>
</section>

@stop

这就是静态帖子的外观

@extends('layouts.layout')
@section('content')
<section id="main-header">
<div class="container mt-4">
<div class="row">
<div class="col-md-8">
<div class="bg-black text-white text-center">
<h1>De Seneste Nyheder</h1>
</div>
<div class="row">
<div class="col-md-6">
<div class="card">
<a href="#">
<img width="250" height="190" src="{{asset('img/1491602_w1.jpg')}}" alt=""
class="card-img-top">
<div class="card-body">
<h4 class="card-title">Inter Har Vundet CL!</h4>
</a>
<small class="text-muted"><i class="far fa-clock"></i> Posted 20 minutes ago</small>
<p class="card-text">
José Mourinho har fandme gjort det igen!. Inter er europæiske
mestre
igen efter 60 år!</p>
</div>
</div>
</div>
<div class="col-md-6 mb-3">
<div class="card">
<img width="250" height="190" src="{{asset('img/1491602_w1.jpg')}}" alt=""
class="card-img-top">
<div class="card-body">
<h4 class="card-title">Inter Har Vundet CL!</h4>
<small class="text-muted"><i class="far fa-clock"></i> Posted 20 minutes ago</small>
<p class="card-text">
José Mourinho har fandme gjort det igen!. Inter er europæiske
mestre
igen efter 60 år!</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 mb-3">
<div class="card">
<img width="250" height="190" src="{{asset('img/1491602_w1.jpg')}}" alt="" class="card-img-top">
<div class="card-body">
<h4 class="card-title">Inter Har Vundet CL!</h4>
<small class="text-muted"><i class="far fa-clock"></i> Posted 20 minutes ago</small>
<p class="card-text">
José Mourinho har fandme gjort det igen!. Inter er europæiske
mestre
igen efter 60 år!</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card">
<img width="250" height="190" src="{{asset('img/1491602_w1.jpg')}}" alt="" class="card-img-top">
<div class="card-body">
<h4 class="card-title">Inter Har Vundet CL!</h4>
<small class="text-muted"><i class="far fa-clock"></i> Posted 20 minutes ago</small>
<p class="card-text">
José Mourinho har fandme gjort det igen!. Inter er europæiske
mestre
igen efter 60 år!</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="bg-black text-white text-center d-none d-lg-block">
<h1>Sponsor</h1>
</div>
<h1>Sponsor Her</h1>
<br>
<div class="card  d-none d-lg-block" style="width: 18rem;">
<div class="card-header text-dark text-center">
Premier League Table
</div>
<table class="card-table table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Hold</th>
<th scope="col">K</th>
<th scope="col">P</th>
</tr>
</thead>
<tbody>
<tr class="bg-dark-blue">
<td>1</td>
<td><img height="25" width="25"
src="https://dxugi372p6nmc.cloudfront.net/ronaldo/current/64x64/8650/teamlogo.png"
alt="">
Liverpool
</td>
<td>22</td>
<td>64</td>
</tr>
<tr class="bg-dark-blue">
<td>2</td>
<td><img height="25" width="25"
src="https://dxugi372p6nmc.cloudfront.net/ronaldo/current/64x64/8456/teamlogo.png"
alt="">
Manchester City
</td>
<td>23</td>
<td>48</td>
</tr>
<tr class="bg-dark-blue">
<td>3</td>
<td><img height="25" width="25"
src="https://dxugi372p6nmc.cloudfront.net/ronaldo/current/64x64/8197/teamlogo.png"
alt="">
Leicester
</td>
<td>23</td>
<td>45</td>
</tr>
<tr class="bg-dark-blue">
<td>4</td>
<td><img height="25" width="25"
src="https://dxugi372p6nmc.cloudfront.net/ronaldo/current/64x64/8455/teamlogo.png"
alt="">
Chelsea
</td>
<td>23</td>
<td>39</td>
</tr>
<tr class="bg-dark-red">
<td>5</td>
<td>
<small><img height="25" width="25"
src="https://dxugi372p6nmc.cloudfront.net/ronaldo/current/64x64/10260/teamlogo.png"
alt=""> Manchester United
</small>
</td>
<td>23</td>
<td>34</td>
</tr>
<tr>
<td>6</td>
<td>Liverpool</td>
<td>20</td>
<td>64</td>
</tr>
<tr>
<td>7</td>
<td>Liverpool</td>
<td>20</td>
<td>64</td>
</tr>
<tr>
<td>8</td>
<td>Liverpool</td>
<td>20</td>
<td>64</td>
</tr>
<tr>
<td>9</td>
<td>Liverpool</td>
<td>20</td>
<td>64</td>
</tr>
<tr>
<td>10</td>
<td>Liverpool</td>
<td>20</td>
<td>64</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</section>
<section id="last-news">
<div class="container">
<div class="row justify-content-start mb-3">
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
</div>
<div class="row justify-content-start">
<div class="col-md-4">
</div>
</div>
</section>
<section id="latest_rumors_header">
<div class="container mt-2">
<div class="row">
<div class="col-md-8">
<div class="bg-black text-white text-center">
<h1>De Seneste Transfer Rygter</h1>
</div>
</div>
<div class="col-md-4 d-none d-lg-block">
</div>
</div>
</div>
</section>
<section id="latest_rumors">
<div class="container mb-4">
<div class="row">
<div class="col-md-4">
<div class="card mb-3">
<div class="card-img-caption">
<a href="#">
<h4 class="card-text bg-black-opacity text-white">Quaresma til Fenerbahce?</h4>
<img width="250" height="180" class="card-img-top"
src="{{asset('img/quaresma-wme6-cover-Wcpu_cover.jpg')}}" alt="">
</a>
</div>
</div>
<div class="card">
<div class="card-img-caption">
<a href="#">
<h4 class="card-text bg-black-opacity text-white">Besiktas taler med Ronaldinho</h4>
<img width="250" height="180" class="card-img-top" src="{{asset('img/images.jpg')}}"
alt="">
</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-3">
<div class="card-img-caption">
<a href="#">
<h4 class="card-text bg-black-opacity text-white">Besiktas taler med Ronaldinho</h4>
<img width="250" height="180" class="card-img-top" src="{{asset('img/images.jpg')}}"
alt="">
</a>
</div>
</div>
<div class="card">
<div class="card-img-caption">
<a href="#">
<h4 class="card-text bg-black-opacity text-white">Besiktas taler med Ronaldinho</h4>
<img width="250" height="180" class="card-img-top" src="{{asset('img/images.jpg')}}"
alt="">
</a>
</div>
</div>
</div>
<div class="col-md-4">
</div>
</div>
</div>
</section>

@stop

我现在真的不知道该怎么做。我目前被卡住了。我希望有人能帮助我。

Answer 1

我解决了这个问题。我错放了foreach循环。我在卡片之前启动了foreach，并在col-md-6之一结束了它