Попытка перевернуть карту css для выравнивания в начальной загрузке

Question

Попытка перевернуть карту css для выравнивания в начальной загрузке

Я пытаюсь получить свою карточку, которую я создал с помощью HTML и CSS, чтобы иметь возможность работать с начальной загрузкой. В настоящее время он находится только в середине раздела, и я не могу понять, как заставить 4 из этих карт выстроиться в один ряд, а затем еще 4, чтобы выровнять их в ряд под ним.

Вот HTML

    <div class="card-container mx-auto mt-5">
        <div class="row">
            <div class="card card-front">
                <img class="card-img-top" src="Assets/aspentree.jpg" alt="Card image cap">
                <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of
                        the
                        card's content.</p>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of
                        the
                        card's content.</p>
                    <!--<a href="#" class="btn btn-primary">Go somewhere</a>-->
                </div>
            </div>
            <div class="card card-back">
                <div class="card-body bg-warning">
                    <a href="#" class="btn btn-primary">Go somewhere</a>
                </div>
            </div>
        </div>
    </div>

0

html css twitter-bootstrap flip card

Источник

user11904892 17 июн '20 в 03:52

1 ответ

Решение

Другие вопросы по тегам html css twitter-bootstrap flip card

user13698625 17 июн '20 в 07:09 2020-06-17 07:09 · Accepted Answer · 2020-06-17 07:09

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

<div class="container-fluid">
    <div class="row">
        <div class="col-12 col-md-3">
            <div class="card-container mx-auto mt-5">
                <div class="card card-front">
                    <img class="card-img-top" src="Assets/aspentree.jpg" alt="Card image cap">
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of
                            the
                            card's content.</p>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of
                            the
                            card's content.</p>
                        <!--<a href="#" class="btn btn-primary">Go somewhere</a>-->
                    </div>
                </div>
                <div class="card card-back">
                    <div class="card-body bg-warning">
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
            </div>
        </div><!-- ./col -->
        <div class="col-12 col-md-3">
            <div class="card-container mx-auto mt-5">
                <div class="card card-front">
                    <img class="card-img-top" src="Assets/aspentree.jpg" alt="Card image cap">
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of
                            the
                            card's content.</p>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of
                            the
                            card's content.</p>
                        <!--<a href="#" class="btn btn-primary">Go somewhere</a>-->
                    </div>
                </div>
                <div class="card card-back">
                    <div class="card-body bg-warning">
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
            </div>
        </div><!-- ./col -->
        <div class="col-12 col-md-3">
            <div class="card-container mx-auto mt-5">
                <div class="card card-front">
                    <img class="card-img-top" src="Assets/aspentree.jpg" alt="Card image cap">
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of
                            the
                            card's content.</p>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of
                            the
                            card's content.</p>
                        <!--<a href="#" class="btn btn-primary">Go somewhere</a>-->
                    </div>
                </div>
                <div class="card card-back">
                    <div class="card-body bg-warning">
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
            </div>
        </div><!-- ./col -->
        <div class="col-12 col-md-3">
            <div class="card-container mx-auto mt-5">
                <div class="card card-front">
                    <img class="card-img-top" src="Assets/aspentree.jpg" alt="Card image cap">
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of
                            the
                            card's content.</p>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of
                            the
                            card's content.</p>
                        <!--<a href="#" class="btn btn-primary">Go somewhere</a>-->
                    </div>
                </div>
                <div class="card card-back">
                    <div class="card-body bg-warning">
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
            </div>
        </div><!-- ./col -->
    </div> <!-- ./row -->
</div><!-- ./container-fluid -->

Я разделил row в четыре cols поэтому, чтобы создать новую строку, вы можете ее воспроизвести.

Также попробуйте установить ширину .card-container в процентах вместо rem, чтобы он больше содержался в столбце.

Надеюсь, это то, что вы просили, и это решит проблему.