Bootstrap 3溢出容器中的文本覆盖英雄图像

Posted 2023-03-06

【中文标题】Bootstrap 3溢出容器中的文本覆盖英雄图像

【英文标题】：Text overlaying hero image in Bootstrap 3 overflowing container

【发布时间】：2014-03-25 03:10:43

【问题描述】：

这看起来非常愚蠢，但我已经尝试了所有方法，但似乎无法解决这个问题。

使用完全更新的 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"  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 -->

【参考方案1】：

文本实际上并没有超出其容器的宽度，尽管它看起来是这样。罪魁祸首是应用于 .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/

【讨论】：

非常感谢。我试过拉掉填充或负边距除此之外的所有东西。我真的很感谢你的解释，所以我下次知道了。