一行中的引导列与 thymeleaf 图像标签重叠

Question

我有一个 div 包含一行 2 列。左列包含图像，右侧包含一些文本。我已经尝试了 100 多种不同的组合，但无法弄清楚如何避免重叠问题。如您所见，当我开始调整窗口大小时，它开始重叠。

<div class="py-5">
    <section class="my-5"><!-- Section -->
        <div class="container"><!-- Container -->
            <div class="row"><!-- Grid row -->

                <!-- Grid column -->
                <div class="col-xs-12 col-md-6">
                    <img th:src="@{/img/about.jpg}" src="" alt="">
                </div>
                <!-- Grid column -->

                <!-- Grid column -->
                <div class="col-xs-12 col-md-6">
                    <!-- Section heading -->
                    <h1 class="h1-responsive font-weight-bold mb-4">About Us</h1>
                    <!-- Section description -->
                    <p class="lead grey-text mx-auto">
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                        Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
                        when an unknown printer took a galley of type and scrambled it to make a type
                        specimen book. It has survived not only five centuries, but also the leap into
                        electronic typesetting, remaining essentially unchanged. It was popularised in
                        the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
                        and more recently with desktop publishing software like Aldus PageMaker
                        including versions of Lorem Ipsum.
                    </p>
                </div>
                <!-- Grid column -->

            </div><!-- Grid row -->
        </div><!-- Container -->
    </section><!-- Section -->
</div>

我也希望在顶部边距很小的时候也有一些边距，以便有清晰的分隔。

更新

Ryan Maffey，您的解决方案在一定程度上运行良好。这是在进行移动视图之前的结果。在这一点上看起来很糟糕。如果图像缩小超过 50%，我很想在自己的行上有图像。有可能吗？

更新 2

我终于找到了我正在寻找的组合。这个结果解决了我所有的问题。

<div>
    <section>
        <div class="container">
            <div class="row">

                <div class="col-md-12 col-lg-6 my-4">
                    <img style="width: 100%;" th:src="@{/img/about.jpg}" alt="">
                </div>

                <div class="col-md-12 col-lg-6 my-4">
                    <h1 class="h1-responsive font-weight-bold mb-4">Header</h1>
                    <p class="lead grey-text mx-auto">Lorem ipsum...</p>
                </div>

            </div>
        </div>
    </section>
</div>

Answer 1

在移动视图中，您需要将图像垂直居中。只需将该图像的父 div 样式用于display: inline-block; height: 100%; vertical-align: middle; 并将该图像用于vertical-align: middle; max-height: 100px;

Answer 2

图像看起来好像溢出了列。

在图像上添加 CSS width: 100% 意味着它的宽度仅与它所在的列的宽度一样宽。