html - 在引导程序 4 中线性化卡片

问题描述

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

 <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 列在我的视图中，怎么做？

标签： htmlcsslaraveltwitter-bootstrap

默认情况下，card-columns该类是砌体视图。对于偶数行，您需要将card-columns类更改为多个card-deckdiv。

请参阅此处的文档：https ://getbootstrap.com/docs/4.3/components/card/#card-decks

html - 在引导程序 4 中线性化卡片

问题描述

解决方案

推荐阅读