Html 引导：具有绝对定位的容器？

我有以下标记：

<div class="banner-wrapper">
    <div class="banner-image" style="background-image: url(...);"></div>
    <div class="container">
        <div class="row">
            <div class="col-xs-12">
                SOME ARBITRARILY LONG TEXT
            </div>
        </div>
    </div>
</div>

我想要的是文本显示在图像顶部，保留容器附带的响应边距。图像是全宽的（就像是在流体容器中一样）

问题在于，在容器上设置

position:absolute

似乎会破坏它。有没有更好的方法来实现这一点

---

jsiddle:

您只需要为您的容器提供一个绝对包装器，而不是使容器成为绝对的，保持引导程序干净

我已将您的JSFIDLE修改为下面的。。如果这是您想要的，请接受，谢谢

/*作为外部资源包含最新编译和缩小的CSS*/
/*可选主题*/
@导入url（'//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap theme.min.css'）；
.横幅包装{
宽度：100%；
位置：相对位置；
}
.横幅图像{
宽度：100%；
高度：450px；
背景颜色：灰色；
}
.绝对包装{
位置：绝对位置；
宽度：100%；
最高：50%；
}
.集装箱{
文本对齐：居中；
}

绝对DIV中的一些很长的文本
一些任意长的文本具有正确的边距

设置背景图像位置：绝对

.banner图像{
宽度：100%；
高度：450px；
背景颜色：灰色；
位置：绝对位置；
}

你能给我JSFIDLE的链接吗，这样我就可以清楚地了解你的问题了@Jafferwilson您期望的输出。输出不可用…我仍然无法理解您的problem@JafferWilson我更新了小提琴。。我希望灰色区域内的文本与外部的文本一样。。。它们都在容器内，除了一个绝对位于另一个div内，所以，您希望灰色部分中的完整文本在外面..您可以发送一些图像以澄清您想要的输出..好的解决方案，完美！

.banner-wrapper {
  width: 100%;
  position: relative;

  .banner-image {
    background-position: center;
    background-size: cover;
  }

  .container {
    text-align: center;
    position: absolute;
    bottom: 0;
  }
}