Отзывчивая система сетки Bootstrap-4 не разрушается

Question

Кажется, я не могу разбить сетку на 1 изображение в строке в sm.

Это мое первое испытание с начальной загрузкой 4, я прошел через систему сетки и там говорилось, что отклики разбиваютсявозникают при добавлении размера к каждому col- Все же я не вижу поломок.

С большого экрана:

На меньший экран:

HTML

<div class="container-fluid text-right">
    <div class="row">
        <div class="col-sm-12 col-md-6">
            <div class="card mb-3">
                <div class="card-img"
                     style="background-image:url(https://snap-photos.s3.amazonaws.com/img-thumbs/960w/1U2EGZ07GU.jpg);">
                </div>
                <div class="card-img-overlay d-flex flex-column justify-content-between">
                    <h4 class="card-title">das das</h4>
                    <p class="card-text">lorem oirrwerwer asdf asfd</p>
                </div>
            </div>
        </div>
        <div class="col-sm-12 col-md-6">
            <div class="card mb-3">
                <div class="card-img"
                     style="background-image:url(https://snap-photos.s3.amazonaws.com/img-thumbs/960w/1U2EGZ07GU.jpg);">
                </div>
                <div class="card-img-overlay d-flex flex-column justify-content-between">
                    <h4 class="card-title">das das</h4>
                    <p class="card-text">lorem oirrwerwer asdf asfd</p>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

.card {
  width: 100%;
  height: 300px;
  overflow: hidden;

}

.card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: black; /* fallback color */
  background-position: center;
  background-size: cover;
  transition:all 0.3s ease-in-out;
  opacity:1;
}
.card:hover .card-img,
.card:focus .card-img {
  transform: scale(1.2);
  opacity:0.5;
}

.card:hover .card-img-overlay{
  color:#730d0d;
}

.card-img-overlay>h4, .card-img-overlay>p{
  visibility:hidden;
}

.card-img-overlay:hover h4, .card-img-overlay:hover p{
  visibility: visible;
}

.card:hover .card-img-overlay p{

}

Answer 1

EDIT:

Добрый взгляд Михал Драбик в своем ответе. Это именно проблема. Когда я вставил ваш код в новый проект Bootstrap, мета области просмотра уже была предварительно заполнена, поэтому я даже не заметил.

ORIGINAL:

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

Единственное, о чем я могу думать, это то, что ваша среда Bootstrap как-то повреждена (вы проектируете в рамках среды начальной загрузки, верно?) Без просмотра связанных файлов .css и .js это было бы Трудно дать вам гораздо больше помощи. Может быть, попробуйте запустить новый проект Bootstrap с нуля и вставьте туда приведенный выше код и посмотрите, есть ли у вас проблемы. Если вы этого не сделаете, и это сработает, вы, вероятно, что-то напортачили в оригинальной платформе.

Answer 2

Это должно быть col-12, а не col-xs/sm-12.

col-xs/sm-12 не существует в Bootstrap 4. - РЕДАКТИРОВАТЬ ... Да, я ошибаюсь.

.card {
  width: 100%;
  height: 300px;
  overflow: hidden;

}

.card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: black; /* fallback color */
  background-position: center;
  background-size: cover;
  transition:all 0.3s ease-in-out;
  opacity:1;
}
.card:hover .card-img,
.card:focus .card-img {
  transform: scale(1.2);
  opacity:0.5;
}

.card:hover .card-img-overlay{
  color:#730d0d;
}

.card-img-overlay>h4, .card-img-overlay>p{
  visibility:hidden;
}

.card-img-overlay:hover h4, .card-img-overlay:hover p{
  visibility: visible;
}

.card:hover .card-img-overlay p{

}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css" />

<div class="container-fluid text-right">
    <div class="row">
        <div class="col-12 col-md-6">
            <div class="card mb-3">
                <div class="card-img"
                     style="background-image:url(https://snap-photos.s3.amazonaws.com/img-thumbs/960w/1U2EGZ07GU.jpg);">
                </div>
                <div class="card-img-overlay d-flex flex-column justify-content-between">
                    <h4 class="card-title">das das</h4>
                    <p class="card-text">lorem oirrwerwer asdf asfd</p>
                </div>
            </div>
        </div>
        <div class="col-12 col-md-6">
            <div class="card mb-3">
                <div class="card-img"
                     style="background-image:url(https://snap-photos.s3.amazonaws.com/img-thumbs/960w/1U2EGZ07GU.jpg);">
                </div>
                <div class="card-img-overlay d-flex flex-column justify-content-between">
                    <h4 class="card-title">das das</h4>
                    <p class="card-text">lorem oirrwerwer asdf asfd</p>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 3

Проблема в отсутствии

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

в теге head.