Bootstrap:具有绝对定位的容器？

Question

我有以下标记:

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

Answer 1

你只需要一个容器的绝对包装器,而不是让那个容器绝对,保持bootstrap干净.

我已经将你的jsfiddle修改为以下..如果这是你想要的,请接受,谢谢.

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

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

.banner-image {
  width: 100%;
    height: 450px;
    background-color: gray;
}

.absolute-wrapper{
    position: absolute;
    width:100%;
    top:50%;
}

.container {
    text-align: center;
 
}

<div class="banner-wrapper">
    <div class="banner-image"></div>
    <div class ="absolute-wrapper">
        <div class="container">
            <div class="row">
                <div class="col-xs-12">
                    SOME VERY LONG TEXT IN AN ABSOLUTE DIV
                </div>
            </div>
        </div>
    </div>
</div>

<div class="container">
        <div class="row">
            <div class="col-xs-12">
                SOME ARBITRARILY LONG TEXT WITH CORRECT MARGINS
            </div>
        </div>
    </div>