Html 使用jumbotron的文本和图像在更改屏幕尺寸时会失真

今天，我使用bootstrap 3制作了一个网页，我更改了“jumbroton”编码，使其看起来像这样：

虽然背景图像显示通过，但当我调整页面大小时，页面不会调整大小，而是将文本和图像放在“jumbotron”中的其他内容下面

我试着在“巨无霸”周围放置一个“容器”，但运气不好……：(

我的网站：

尝试滚动，你会明白我的意思

style.CSS中的CSS代码

HTML'Jumbotron'

你好，世界！

这是一个简单营销或信息网站的模板。它包括一个称为“英雄单元”的大型标注和三个支持内容。将其用作创建更独特内容的起点。

你非常接近

您应该将其分为两部分，并为max width添加jumbotronwidth类，以使其具有响应性

<div class="jumbotron">
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 pull-right ">
                <img vspace="20" class="jumbotronwidth" alt=" " src="./img/the-blue-tick-md.png">
</div>
<div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
                <h1>
                    Hello, world!
                </h1>

                <p>
                    This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.
                </p>
                <p>
                    <a class="btn btn-primary btn-large" href="#">Learn more</a>&nbsp;<a class="btn btn-primary btn-large" href="#">Extras</a>
                </p>
            </div></div>

---

我认为你的.jumbotron高度导致了这个问题，请尝试使用它。高度：auto；请不要通过破坏你的帖子来为其他人做更多的工作。通过在Stack Exchange网络上发布，你已经授予了Stack Exchange在下分发该内容的不可撤销的权利（即，无论你未来的选择如何）。根据堆栈交换策略，该帖子的非故意破坏版本是已分发的版本。因此，任何故意破坏行为都将被还原。如果您想了解有关删除帖子的更多信息，请参阅：

<div class="jumbotron">
                <img src="./img/the-blue-tick-md.png" alt=" " vspace="20" class="pull-right" class="img-responsive"/>
                <h1>
                    Hello, world!
                </h1>

                <p>
                    This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.
                </p>
                <p>
                    <a class="btn btn-primary btn-large" href="#">Learn more</a>&nbsp;<a class="btn btn-primary btn-large" href="#">Extras</a>
                </p>
            </div>

<div class="jumbotron">
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 pull-right ">
                <img vspace="20" class="jumbotronwidth" alt=" " src="./img/the-blue-tick-md.png">
</div>
<div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
                <h1>
                    Hello, world!
                </h1>

                <p>
                    This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.
                </p>
                <p>
                    <a class="btn btn-primary btn-large" href="#">Learn more</a>&nbsp;<a class="btn btn-primary btn-large" href="#">Extras</a>
                </p>
            </div></div>

.jumbotronwidth
{
max-width:100%;
}