Question

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

<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

图像似乎在列中溢出。

在图像上添加CSS width: 100%意味着它的宽度仅等于其所在列的宽度。

Answer 2

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

连续的自举列与百里香叶图像标签重叠

2 个答案: