html - Bootstrap 网格柱没有对齐角落到角落

问题描述

我正在为“团队”制作一个页面，并且有三个团队成员。第 1 行第 1 列是图像，第 1 行第 2 列是文本，第 2 行第 1 列是文本，第 2 行第 2 列是图像，第 3 行第 1 列是图像，第 3 行第 2 列是文本

所以团队成员的图像是彼此对角线的，文本在图像旁边。所有图像的大小相同。我希望图像的角落相互接触，并且所有列/行的大小相同。任何帮助表示赞赏:)

我有的：

我想要的是：

没有排水沟：

 <body>
    <div id="team" class="container-fluid">
        <div class="row">
            <div class="col">
                <img src=".\images\name1_A0_Rectangle_8_pattern.png" alt="Image"/>
            </div>
            <div class="col">
                <span class="team-title">Developer</span>
            </div>
        </div>

        <div class="row">
            <div class="col">
                <span class="team-title">Developer</span>
            </div>
            <div class="col">
                <img src=".\images\name2_A0_Rectangle_10_pattern.png" alt="Image"/>
            </div>
        </div>

        <div class="row">
            <div class="col">
                <img src=".\images\ProfilePicture_A0_Rectangle_12_pattern.png" alt="Image"/>
            </div>
            <div class="col">
                <span class="team-title">Designer</span>
            </div>
        </div>
    </div>
</body>

标签： htmlcsstwitter-bootstrapbootstrap-4

html - Bootstrap 网格柱没有对齐角落到角落

问题描述

解决方案

推荐阅读