Bootstrap：容器有绝对定位？ [英] Bootstrap: container with absolute positioning?

问题描述

我有以下标记：

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

我想要的是显示在该图像保存了随容器而来的响应边缘。

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

问题是设置 position：absolute 对容器似乎打破了。是否有更好的方法来实现这一点？

The problem is that setting position: absolute on the container seems to break it. Is there a better way to achieve this?

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

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

推荐答案

您只需要一个容器的绝对封装容器，而不是让那个容器是绝对的，保持bootstrap干净。

You just need an absolute wrapper for your container, instead of making that container absolute, keeping bootstrap clean.

我已经修改你的jsfiddle到下面..亲爱的，如果这是你正在寻找，谢谢。

i've modified your jsfiddle to below.. kindly accept if this is what you were looking for, thanks.

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

这篇关于Bootstrap：容器有绝对定位？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！