小编Ale*_*dro的帖子

我有以下标记:

<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>

和相应的SCSS:

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

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

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

我想要的是显示在图像顶部的文本,保留容器附带的响应边距.图像是全宽的(就像它在容器内部一样).

问题是position: absolute容器上的设置似乎打破了它.有没有更好的方法来实现这一目标？

JsFiddle:https://jsfiddle.net/DTcHh/8801/