Bootstrap 4 引导映像未对齐,即使COL加起来为12

Bootstrap 4 引导映像未对齐,即使COL加起来为12,bootstrap-4,Bootstrap 4,我的图像库不会显示为网格,图像只会中断到下一行? 有一个较大的列,我希望四个较小的图像与较大的列平行,而不是进入下一行?任何帮助都将不胜感激 这是我的密码: <div class="tz-gallery"> <div class="row portfolio-images"> <div class="col-sm-12 col-md-6">

我的图像库不会显示为网格,图像只会中断到下一行? 有一个较大的列,我希望四个较小的图像与较大的列平行,而不是进入下一行?任何帮助都将不胜感激

这是我的密码:

    <div class="tz-gallery">

        <div class="row portfolio-images">

            <div class="col-sm-12 col-md-6">
                <a class="lightbox" href="images/shutterstock_424808146 2.jpg">
                    <img src="images/shutterstock_424808146 2.jpg" alt="Bridge">
                </a>
            </div>
            <div class="col-sm-6 col-md-3">
                <a class="lightbox" href="images/shutterstock_424808146 2.jpg">
                    <img src="images/shutterstock_424808146 2.jpg" alt="Park">
                </a>
            </div>
            <div class="col-sm-6 col-md-3">
                <a class="lightbox" href="images/shutterstock_424808146 2.jpg">
                    <img src="images/shutterstock_424808146 2.jpg" alt="Tunnel">
                </a>
            </div>
        </div>
        <div class="row portfolio-images">
            <div class="col-sm-6 col-md-3">
                <a class="lightbox" href="images/shutterstock_424808146 2.jpg">
                    <img src="images/shutterstock_424808146 2.jpg" alt="Park">
                </a>
            </div>
            <div class="col-sm-6 col-md-3">
                <a class="lightbox" href="images/shutterstock_424808146 2.jpg">
                    <img src="images/shutterstock_424808146 2.jpg" alt="Tunnel">
                </a>
            </div>

            <div class="col-sm-12 col-md-6">
                <a class="lightbox" href="images/shutterstock_424808146 2.jpg">
                    <img src="images/shutterstock_424808146 2.jpg" alt="Bridge">
                </a>
            </div>
           
        </div>
        
    </div>

给你……

正文{
溢出x:隐藏;
}
.img{
宽度:95%;
}
.更大{
身高:100%;
宽度:100%;
}
.设置高度{
高度:30vw;
}
.第一排{
身高:50%;
排名:0;
}
.第二排{
身高:50%;
底部:0;
}

文件

您好,请尝试添加父级
div
谢谢您回复我R.B.是的,这是正确的,但我希望最后两张图片位于两张较小的图片下方。所以如果有意义的话,会有一张大图片和四张图片在它旁边的两列中?我更新了我的答案。现在呢?谢谢-当我运行代码片段时,它看起来是正确的,但是当我将它粘贴到html文档时,它仍然不正确。我上传了一张照片给你看。你想让更大的图像与两行的高度相同吗?是的,就是这样!