卡在引导程序 4.6 中的响应能力答案

【问题标题】：Stuck with responsiveness in bootstrap 4.6卡在引导程序 4.6 中的响应能力
【发布时间】：2021-09-11 05:14:18
【问题描述】：

当我调整浏览器的大小时，我的部分相互混合一个部分有两行和 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>

【问题讨论】：

你的问题很混乱，你能试着改一下问题是什么
你能把你的句子整理一下，让我们更容易阅读吗？
抱歉，这可能是我的英语不好的原因，问题是当我调整浏览器的大小以检查它的响应能力时，我在第 3 节中的标题落后于图像但是如果我检查此页面并检查响应能力它运行良好，并且标题在图像之后将进入底部以查看我的问题，您可以将其复制并粘贴到代码编辑器并使用 chrome 打开它，然后通过调整浏览器大小和检查来检查差异

标签： html css twitter-bootstrap responsive

【解决方案1】：

您的问题尚不清楚，但我已将此部分设为响应式！在href中添加图片链接，替换#。第三部分合并到第二部分！它必须在一个 .

<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>

【讨论】：