我有以下标记:
<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/
答案 0 :(得分:6)
你只需要一个容器的绝对包装器,而不是让那个容器绝对,保持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;
}
&#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;
答案 1 :(得分:0)
设置背景图像位置:绝对
.banner-image {
width: 100%;
height: 450px;
background-color: gray;
position:absolute;
}