我有这段代码来显示我的布局,我尝试了许多组合,但没有组合可以对齐它们:
<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列,该怎么做?
您可以将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
标签。您可以在此处查看其用法。