响应式 Bootstrap-4 网格系统不会崩溃

Question

我似乎无法将网格分成每行 1 个图像sm。

这是我对 bootstrap 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

问题是缺乏

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

在head标签中。