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

时间:2015-06-12 04:51:11

标签: html css twitter-bootstrap

我有以下标记:

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

2 个答案:

答案 0 :(得分:6)

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

我已经将你的jsfiddle修改为以下..请接受,如果这是你正在寻找的,谢谢。

&#13;
&#13;
/* 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;
 
}
&#13;
<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>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

设置背景图像位置:绝对

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