Изображение на загрузочной карте не в нужном месте, когда на телефоне

Question

У меня есть изображение в загрузочной карточке во втором столбце. На рабочем столе все выглядит хорошо, но когда я переключаюсь на телефон, мне не нравится, как он выглядит.

<div class="mt-5 container card w-100">
    <div class="row">
        <div class="col">
            <div class="card-body">
                <h4 class="card-title">Card-title</h4>
                <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="card-link">Card link</a>
            </div>
        </div>
        <div class="col">
            <img class="img-fluid img-responsive" src="trees.jpg">
        </div>
    </div>
</div>

Изображение выглядит так при просмотре на телефоне и декстопе: https://imgur.com/a/9afhvil

Может ли кто-нибудь помочь мне с этим?

Answer 1

В bs4, если вы просто используете класс col, классы всегда будут рядом друг с другом.Вам нужно определить, на каком (экранном) размере вы хотите, чтобы столбец имел какой размер.

<div class="mt-5 container card w-100">
    <div class="row">
        <div class="col-12 col-md-6">
            <div class="card-body">
                <h4 class="card-title">Card-title</h4>
                <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="card-link">Card link</a>
            </div>
        </div>
        <div class="col-12 col-md-6">
            <img class="img-fluid img-responsive" src="trees.jpg">
        </div>
    </div>
</div>

Здесь все, что я изменил, это номер столбца, я говорю, что на самых маленьких экранах столбец должен занимать все 12 пробелов.На md (средних) размерах (и выше) он должен занимать только 50% экрана.

Документация о системе координат bs4 , возможно, вам нужны другие точки останова, кроме col-md-6.Может быть, вы также удовлетворены col-sm-6.Важно отойти от этих ответов, как настроить сетку с помощью начальной загрузки, потому что в этом весь смысл использования начальной загрузки.

Answer 2

С начальной загрузкой 4 изменились. Давайте изменим класс col на col-md-6, чтобы отобразить 2 столбца на рабочем столе. col-sm-6 для отображения 2 столбцов на планшете или col-sm-12 для отображения 1 столбца с полным сайтом. И поместите col-12, чтобы отобразить полный размер на телефоне.

Answer 3

Для отзывчивости нужно использовать col-sm, col-md, col-lg, col-xl. Вы можете обратиться через w3schools для сетки Bootstrap

<div class="mt-5 container card w-100">
    <div class="row">
        <div class="col-sm-6">
            <div class="card-body">
                <h4 class="card-title">Card-title</h4>
                <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="card-link">Card link</a>
            </div>
        </div>
        <div class="col-sm-6">
            <img class="img-fluid img-responsive" src="trees.jpg">
        </div>
    </div>
</div>