Html Bootstrap：具有绝对定位的容器？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30795514/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap: container with absolute positioning?
提问by Alejandro
I have the following markup:
我有以下标记：
<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>
And the corresponding SCSS:
以及相应的 SCSS：
.banner-wrapper {
width: 100%;
position: relative;
.banner-image {
background-position: center;
background-size: cover;
}
.container {
text-align: center;
position: absolute;
bottom: 0;
}
}
What I want is the text to appear on top of the image conserving the responsive margins that come with a container. The image is full width (like it was inside a container-fluid).
我想要的是显示在图像顶部的文本，以保留容器随附的响应边距。图像是全宽的（就像在容器流体中一样）。
The problem is that setting position: absoluteon the container seems to break it. Is there a better way to achieve this?
问题是position: absolute容器上的设置似乎破坏了它。有没有更好的方法来实现这一目标？
JsFiddle: https://jsfiddle.net/DTcHh/8801/
JsFiddle：https://jsfiddle.net/DTcHh/8801/
回答by Keith A
You just need an absolute wrapper for your container, instead of making that container absolute, keeping bootstrap clean.
你只需要一个绝对的容器包装器，而不是让容器成为绝对的，保持引导程序干净。
i've modified your jsfiddle to below.. kindly accept if this is what you were looking for, thanks.
我已将您的 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>回答by Maheswaran S
Set background image position:absolute
设置背景图片位置：绝对
.banner-image {
width: 100%;
height: 450px;
background-color: gray;
position:absolute;
}