bootstrap 4.6中的响应能力停滞不前

Question

当我调整浏览器大小时，我的部分会相互混合一个部分有两行和12个图像然后新分区开始如果我调整chrome浏览器的大小，它只有一个标题，这些东西正在混合但在检查工具中，并不能很好地混合工作

为什么是

这是我的代码

.second-page {
height: 100vh;
}
.second-page img {
width: 230px;
height: 137px;
padding: 5px;
filter: grayscale(100%);
transition: .5s;
}
.second-page img:hover {
filter: grayscale(0%);
transform: scale(1.1);
transform: .3s;
}

/* second-page ends  */

/* third-page starts  */
.third-page {
height: 100vh;
}

<section class="second-page">
<h1 class="text-center my-5">Intended Projects</h1>
<div class="row">
<div class="col-md-12 my-5 text-center">
<a href="images/1.jpg"><img src="https://cdnuploads.aa.com.tr/uploads/Contents/2020/05/30/thumbs_b_c_a4a6996640e91d4ff86a71f5d9d9f84b.jpg?v=225920" alt=""></a>
<a href="images/2.jpg"><img src="https://cdnuploads.aa.com.tr/uploads/Contents/2020/05/30/thumbs_b_c_a4a6996640e91d4ff86a71f5d9d9f84b.jpg?v=225920" alt=""></a>
<a href="images/3.png"><img src="https://cdnuploads.aa.com.tr/uploads/Contents/2020/05/30/thumbs_b_c_a4a6996640e91d4ff86a71f5d9d9f84b.jpg?v=225920" alt=""></a>
<a href="images/4.jpg"><img src="https://cdnuploads.aa.com.tr/uploads/Contents/2020/05/30/thumbs_b_c_a4a6996640e91d4ff86a71f5d9d9f84b.jpg?v=225920" alt=""></a>
<a href="images/5.jpg"><img src="https://cdnuploads.aa.com.tr/uploads/Contents/2020/05/30/thumbs_b_c_a4a6996640e91d4ff86a71f5d9d9f84b.jpg?v=225920" alt=""></a>
</div>
</div>

<div class="row">
<div class="col-md-12 col-sm-6 my-5 text-center">
<a href="images/2.jpg"><img src="https://cdnuploads.aa.com.tr/uploads/Contents/2020/05/30/thumbs_b_c_a4a6996640e91d4ff86a71f5d9d9f84b.jpg?v=225920" alt=""></a>
<a href="images/3.png"><img src="https://cdnuploads.aa.com.tr/uploads/Contents/2020/05/30/thumbs_b_c_a4a6996640e91d4ff86a71f5d9d9f84b.jpg?v=225920" alt=""></a>
<a href="images/4.jpg"><img src="https://cdnuploads.aa.com.tr/uploads/Contents/2020/05/30/thumbs_b_c_a4a6996640e91d4ff86a71f5d9d9f84b.jpg?v=225920" alt=""></a>
<a href="images/5.jpg"><img src="https://cdnuploads.aa.com.tr/uploads/Contents/2020/05/30/thumbs_b_c_a4a6996640e91d4ff86a71f5d9d9f84b.jpg?v=225920" alt=""></a>
<a href="images/6.jpg"><img src="https://cdnuploads.aa.com.tr/uploads/Contents/2020/05/30/thumbs_b_c_a4a6996640e91d4ff86a71f5d9d9f84b.jpg?v=225920" alt=""></a>
</div>
</div>

</section>

<!-- second-page ends -->

<!-- third-page starts -->
<section class="third-page ">
<h1 class="text-center">Our Developers Team</h1>
</section>

Answer 1

您的问题还不清楚，但我已经对此部分做出了回应！在href中添加图像的链接，替换#。第三部分合并在第二部分中！它必须在a内部。

<section class="second-page">
<h1 class="text-center my-5">Intended Projects</h1>
<div class="row">
<div class="col-md-12 my-5 text-center">
<a href="images/1.jpg"><img src="#" alt=""></a>
<a href="images/2.jpg"><img src="#" alt=""></a>
<a href="images/3.png"><img src="#" alt=""></a>
<a href="images/4.jpg"><img src="#" alt=""></a>
<a href="images/5.jpg"><img src="#" alt=""></a>
</div>
</div>
<div class="row">
<div class="col-md-12 my-5 text-center">
<a href="images/2.jpg"><img src="#" alt=""></a>
<a href="images/3.png"><img src="#" alt=""></a>
<a href="images/4.jpg"><img src="#" alt=""></a>
<a href="images/5.jpg"><img src="#" alt=""></a>
<a href="images/6.jpg"><img src="#" alt=""></a>
</div>
</div>
<div>
<h1 class="text-center">Our Developers Team</h1>
</div>
</section>