Линеаризовать карты в bootstrap 4

Question

У меня есть этот код, чтобы показать мой макет, я перепробовал много комбинаций, но ни с одной не могу выровнять их:

 <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 столбца в моем представлении, как это сделать?

Answer 1

Вы можете сгруппировать свои 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. Вы можете проверить его использование здесь .

Answer 2

Я добавил этот код для 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>

Answer 3

Класс card-columns по умолчанию является видом кладки. Для четных строк вам нужно изменить класс card-columns на несколько card-deck делений.

См. Документацию здесь: https://getbootstrap.com/docs/4.3/components/card/#card -decks