温馨提示:本文翻译自stackoverflow.com,查看原文请点击:html - Linearize cards in bootstrap 4

html - 引导4中的卡片线性化

发布于 2020-03-27 16:11:07

我有这段代码来显示我的布局,我尝试了许多组合,但没有组合可以对齐它们:

 <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列,该怎么做?

在此处输入图片说明

查看更多

查看更多

提问者
Liliymas
被浏览
17
Luiscri 2020-01-31 03:53

您可以将cardcard-deck分组。这样,就不必声明每个组中有多少个元素。如果,例如,您希望每个组中包含三个元素,则可以这样进行:

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

如果需要第二行,只需添加card-deck其他三个元素即可。

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

我也建议你使用card-bodycard-textcard-footer标签。您可以在此处查看其用法

发布
问题

分享
好友

手机
浏览

扫码手机浏览