Question

尝试遍历我的数据库并在我的数据库中为每个“董事会成员”发布一个引导卡。但是，使用我当前的代码，它们相互叠加，我需要它们在行中。这是我目前的代码。

<div class="row">
<div class="col-sm-4 my-4">
    @if(count($boardMembers) > 0)
        @foreach($boardMembers as $boardMember)
        <div class="card">
                <img class="card-img-top" src="img/user1.jpg" alt="">
                <div class="card-body">
                    <h2 class="card-title">{{$boardMember->name}}</h2>
                    <p class="card-text">{!!$boardMember->description!!}</p>
                </div>        
        </div>
        @endforeach
    @else
            <p>No Members Found</p>
    @endif
</div>

</div>

Answer 1

您需要循环.col部分：

@if(count($boardMembers) > 0)
    @foreach($boardMembers as $boardMember)
<div class="col-sm-4 my-4">
    <div class="card">
        <img class="card-img-top" src="img/user1.jpg" alt="">
        <div class="card-body">
            <h2 class="card-title">{{$boardMember->name}}</h2>
            <p class="card-text">{!!$boardMember->description!!}</p>
        </div>        
    </div>
</div>
    @endforeach
@else
<p>No Members Found</p>
@endif

这会创建多个带有.col的{{1}}个，但请确保您设置.card的样式，或者也可以将其设置为<p>No Members Found</p>

尝试使用bootstrap卡遍历数据库

1 个答案: