自适应Bootstrap-4网格系统不崩溃

Question

在sm中，我似乎无法将网格分成每行1张图像。

这是我对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标签中。

Answer 2

编辑：

MichałDrabik的回答很好。这正是问题所在。当我将您的代码粘贴到新的Bootstrap项目中时，视口元数据已经预先填充，因此我什至没有注意到。

原始：

也许尝试在浏览器中对其进行测试以确保。我将您的代码原封不动地复制并粘贴到Dreamweaver中的全新引导环境中，无论是在本机实时视图还是在几种不同的浏览器测试中，它的行为都完全符合您的期望。我认为代码本身没有任何问题。

我唯一想到的另一件事是您的Bootstrap框架已损坏（您在引导框架中进行了设计，对吧？）而没有看到关联的.css和.js文件，很难给您更多帮助。也许尝试从头开始创建一个新的Bootstrap项目，并将上面的代码粘贴到那里，看看是否还有问题。如果不这样做，它会起作用，那么您可能在原始框架中搞砸了。

Answer 3

它必须是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>