bootstrap-4 - Laravel - 如何在卡片和分页之间创建距离

Question

我使用引导程序 4 编写“第二篇文章”，使用分页进行页码编号，但为什么卡片和分页在引导程序 4 中粘合在一起。我想在卡片和分页之间留一个空白距离，我可以将其移动到中心或右侧可以使用<hr>. 但仍然无法用空格将它们分开。这是帖子页面的索引文件

@extends('layouts.app')

@section('content')
    <h1>Posts</h1>
    @if (count($posts) > 0)
        @foreach ($posts as $post)
            <div class="card bg-light card-body mt-2">
                <h3><a href="/posts/{{$post->id}}">{{$post->title}}</a></h3>
                <small>Written on {{$post->created_at}}</small>
            </div>
        @endforeach
        {{$posts->links()}}
    @else
        <p>No Posts Found</p>
    @endif
@endsection

这是 PostsController 页面

class PostsController extends Controller
{

    public function index()
    {
        $posts = Post::orderBy('title','desc')->paginate(1);
        return view('posts.index')->with('posts', $posts);
    }

标签： bootstrap-4

Answer 1

这是 Bootstrap 相关的，与 Laravel/Eloquent 无关。你可以改变

<div class="card bg-light card-body mt-2">

至

<div class="card bg-light card-body my-2">

但这会让你的牌之间留有“4 边距”。最好的方法是将您的分页包装在<div>：

改变

{{$posts->links()}}

至

<div class="mt-2">
  {{$posts->links()}}
</div>

https://getbootstrap.com/docs/4.3/utilities/spacing/