在引导程序 4 中线性化卡片答案

【问题标题】：Linearize cards in bootstrap 4在引导程序 4 中线性化卡片
【发布时间】：2020-05-16 08:39:30
【问题描述】：

我有这段代码来显示我的布局，我尝试了很多组合，但没有一个我可以对齐它们：

 <div class="col col-sm-2 col-md-2">
    </div>
<div class="row">
    <div class="col col-sm-2 col-md-2">
    </div>
    <div class="col col-sm-8 col-md-8">
        <div class="card-columns">
            @foreach($asesorias as $asesoria)
            <div class="card" style="width: 18rem;height:100%">
                <img class="card-img-top" src="/adminlte/img/user4-128x128.jpg" alt="Foto perfil asesor">
                <div class="card-body">
                    <h5 class="card-title">{{ $asesoria->place }}</h5>
                    <p class="card-text">
                        <strong>Comunidad: </strong>{{ $asesoria->comunidad_id }}<br>
                        <strong>Provincia: </strong>{{ $asesoria->provincia_id }}<br>
                        <strong>Municipio:</strong>{{ $asesoria->municipio_id }}<br>
                        <strong>Lugar: </strong>{{ $asesoria->place }}<br>
                        <strong>Fecha: </strong>{{ $asesoria->date }}<br>
                        <strong>Hora: </strong>{{ $asesoria->time }}<br>
                        <br>
                    </p>

                </div>
                <div class="text-center"
                    style="position: absolute;bottom: 0;left:0;right:0;margin-left:auto;margin-right:auto;">
                    <a href="#" class="btn btn-primary">Reservar</a>
                </div>
            </div>

            @endforeach
        </div>
    </div>
    <div class="col col-sm-2 col-md-2">
    </div>
</div>

但结果视图是这样的：

卡片不对齐，因为每张卡片的内容不同。

.card-columns {
    column-count:3;
 }

我怎样才能线性化它们？

我已经改变了

卡片组

但现在我问我，如果我只想要 4 列在我的视图中，该怎么做？

【问题讨论】：

标签： html css laravel twitter-bootstrap

【解决方案1】：

我已经为 4 列添加了此代码。

<div class="col-12">
        @foreach($asesorias as $asesoria)
            @if($loop->index % 4 == 0)
                <div class="card-deck">
            @endif
            <div class="card mb-3">
                <img src="/adminlte/img/user4-128x128.jpg" class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">{{ $asesoria->place }}</h5>
                    <p class="card-text">
                        <strong>Comunidad: </strong>{{ $asesoria->comunidad_id }}<br>
                        <strong>Provincia: </strong>{{ $asesoria->provincia_id }}<br>
                        <strong>Municipio:</strong>{{ $asesoria->municipio_id }}<br>
                        <strong>Lugar: </strong>{{ $asesoria->place }}<br>
                        <strong>Fecha: </strong>{{ $asesoria->date }}<br>
                        <strong>Hora: </strong>{{ $asesoria->time }}<br>
                        <br></p>
                    <p class="card-text text-center" style="position:absolute;bottom: 0;left: 0;right: 0;">
                        <a href="#" class="btn btn-primary">Reservar</a>
                    </p>
                </div>
            </div>
            @if($loop->iteration % 4 == 0)
                </div>
            @endif

        @endforeach

    </div>

【讨论】：

【解决方案2】：

您可以将您的card 分组到card-deck 组中。这样就不需要声明每个组中有多少元素。如果，即你想要每个组中的三个元素，你可以这样做：

<div class="card-deck">
    <div class="card>...</div>
    <div class="card>...</div>
    <div class="card>...</div>
</div>

如果您想要第二行，只需添加另一个 card-deck 和其他三个元素。

这样每个组中的所有元素都将完美对齐。

我还建议您使用card-body、card-text 和card-footer 标签。你可以查看它的用法here。

【讨论】：

【解决方案3】：

card-columns 类默认是砖石视图。对于偶数行，您需要将 card-columns 类更改为多个 card-deck div。

在此处查看文档：https://getbootstrap.com/docs/4.3/components/card/#card-decks

【讨论】：

我编辑了我的问题。我不明白，怎么能在我的视图中只看到 4 列？