Question

这看起来令人难以置信的愚蠢，但我已经尝试了一切，似乎无法解决这个问题。

使用Bootstrap 3，完全更新，我正在尝试在容器内设置的响应式英雄图像上叠加文本。代码在这里：http://jsfiddle.net/megkadams/62g7s/1/

文本行超出了容器的宽度，我无法弄清楚原因。我在另一个网站上有几乎完全相同的代码，除了英雄图像是全屏并且放在容器外面，它工作得很好。

任何帮助都会很棒。

<div class="container">
    <div class="row" id="landing-header">
        <div class="col-lg-12">
            <img src="../assets/img/landing-img.png" alt="Photo description" class="landing-img" />
            <div class="landing-header-content">
                <div class="row">
                    <div class="col-sm-4">
                        <h1>Landing Page Title</h1>
                    </div>
                    <div class="col-sm-8">
                        <p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.</p>
                </div>
            </div>
        </div>
    </div>
    <div class="row" id="page-body">
        <div class="col-sm-12">
            <h2>The rest of my body</h2>
        </div>
    </div> <!-- Close row -->
</div> <!-- Close container -->

Answer 1

文本实际上并没有超出其容器的宽度，尽管它看起来是这样的。 culrpit是应用于.col-lg-12左侧和右侧的15个像素的填充：

.col-lg-12 {
  padding-left: 15px;
  padding-right: 15px;
}

因此，当此填充向内推动 img.landing-img 时，它不向内推 div.landing-header-content ，因为它是 职位：绝对 。绝对定位的元素不受填充的影响。

我已经更新了你的小提琴来解决这个问题，并做了一些其他微小的调整，可以帮助你：

http://jsfiddle.net/62g7s/7/

文本覆盖Bootstrap 3溢出容器中的英雄形象

1 个答案: