Boostrap 卡 - 问题之间的空间！！我需要每个“eventoCard”之间都有一个空格

Question

我一直在使用 Bootstrap 5，并且之前做过类似的东西；在每个“eventoCard”上，我需要在它们之间留出间距或空间；发生的情况是我展示了 4 张不同的卡片，它们都粘在一起了。

<section class="container eventoslist" data-aos="fade-up">
    <div class="row d-flex justify-content-around">
        @foreach ($events->take(4) as $event)
            <div class="eventoCard col-lg-3 col-md-6 col-sm-12 mb-3 p-0">
                <div class="eventoCardImg">
                    @if (count($event->photos))
                        <img src="{{ asset('storage/event_photos/' .$event->photos()->orderBy('destaque', 'asc')->orderBy('created_at', 'desc')->first()->fotografia) }}"
                             class="img-post" alt="Event image">
                    @else
                        <img src="{{ asset('storage/event_photos/defaultevent.jpg') }}" class="img-post"
                             alt="default image">
                    @endif
                </div>
                <div class="cardInfo text-center">
                    <h5>{{ $event->name }}</h5>
                    <p class="cardDescription">{{ $event->descricao }}</p>
                    <a href="{{ route('eventoinfo', ['event' => $event]) }}">
                        <button class="btn CardBtn">Saber
                            mais
                        </button>
                    </a>
                </div>
            </div>
        @endforeach
    </div>
</section>

Answer 1

使用 Bootstrap 5 中的

gap

实用程序类，您可以在 Bootstrap 卡之间添加间距。此类将边距应用于元素的所有边。以下是您可以修改代码以在卡片之间添加间隙的方法。

<section class="container eventoslist" data-aos="fade-up">
    <div class="row d-flex justify-content-around gap-3">
        @foreach ($events->take(4) as $event)
            <div class="eventoCard col-lg-3 col-md-6 col-sm-12 mb-3 p-0">
                <div class="eventoCardImg">
                    @if (count($event->photos))
                        <img src="{{ asset('storage/event_photos/' .$event->photos()->orderBy('destaque', 'asc')->orderBy('created_at', 'desc')->first()->fotografia) }}"
                            class="img-post" alt="Event image">
                    @else
                        <img src="{{ asset('storage/event_photos/defaultevent.jpg') }}" class="img-post"
                            alt="default image">
                    @endif
                </div>
                <div class="cardInfo text-center">
                    <h5>{{ $event->name }}</h5>
                    <p class="cardDescription">{{ $event->descricao }}</p>
                    <a href="{{ route('eventoinfo', ['event' => $event]) }}"><button class="btn CardBtn">Saber
                            mais</button></a>
                </div>
            </div>
        @endforeach
    </div>
</section>

gap-3

div 的

row

类将

1rem

(16px) 的边距应用于每张卡片的所有面。您可以调整

gap-

后面的数字来增加或减少间距。例如，

gap-1

应用

0.25rem

(4px) 的边距，

gap-2

应用

0.5rem

(8px) 的边距，依此类推。