为什么我的图像会延伸到其父列之外？答案

【问题标题】：Why are my images extending outside their parent columns?为什么我的图像会延伸到其父列之外？
【发布时间】：2021-02-25 21:05:57
【问题描述】：

我正在 asp.net 中创建一个 Web 应用程序，并且我正在使用 bootstrap 版本 4 进行网站布局。

我有以下代码，在左侧包含一个标题（带有一些附加文本），然后在右侧包含图像，但是当我调整屏幕大小时，图像与它之前的“欢迎来到该站点”重叠最终堆叠列。

<div class="container-fluid">
    <div class="row portal-intro">
        <div class="col-md-4">
            <p class="home-header">Welcome to the site</p>
            <p>
                You can make a variety of applications, reports and requests by using our online forms.
                For example you can apply for resident permits, report an issue or you can request a call back.
            </p>
        </div>
        <div class="col-md-8">
            <img class="img-fluid" src="~/Content/Images/city.png" />

        </div>
    </div>

</div>

<div class="container-fluid">
    <div class="row">
        <div class="col-md-4">
            <h2>Getting started</h2>
            <p>
                ASP.NET MVC gives you a powerful, patterns-based way to build dynamic websites that
                enables a clean separation of concerns and gives you full control over markup
                for enjoyable, agile development.
            </p>
            <p><a class="btn btn-default" href="https://go.microsoft.com/fwlink/?LinkId=301865">Learn more &raquo;</a></p>
        </div>
        <div class="col-md-4">
            <h2>Get more libraries</h2>
            <p>NuGet is a free Visual Studio extension that makes it easy to add, remove, and update libraries and tools in Visual Studio projects.</p>
            <p><a class="btn btn-default" href="https://go.microsoft.com/fwlink/?LinkId=301866">Learn more &raquo;</a></p>
        </div>
        <div class="col-md-4">
            <h2>Web Hosting</h2>
            <p>You can easily find a web hosting company that offers the right mix of features and price for your applications.</p>
            <p><a class="btn btn-default" href="https://go.microsoft.com/fwlink/?LinkId=301867">Learn more &raquo;</a></p>
        </div>
    </div>
</div>

我使用 img-fluid 来查看是否是问题所在，但它仍然会发生。图像最终会堆叠，它只是重叠的“中间”尺寸，当碎石为全宽时很好。

我没有添加任何额外的 CSS，因为这是通过添加 img-fluid 类完成的。

可能值得补充的是，我还尝试将图像设置为列的背景，并且效果相同，这表明左侧的列而不是图像可能存在问题。

【问题讨论】：

标签： html css bootstrap-4 grid-system

【解决方案1】：

问题在于您的文本太大，以至于单个单词不适合您分配的列空间。以响应方式减小字体大小，一切都很好。例如：

@media (min-width: 768px) {
    .home-header {
        font-size: 30px;
    }
}

Problem demonstration

此外，您应该使用标题标签作为标题。 Semantic document structure is important.

【讨论】：