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/

基思·A

您只需要为容器使用绝对包装即可,而不是使该容器成为绝对包装,而是保持引导程序干净。

我已经将您的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>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

TOP 榜单

  1. 1

    来自Microsoft Office加载项taskpane.js的MySQL驱动程序模块的空引用

  2. 2

    使用AWS Cognito和React的仅限Facebook / Google的登录名(无用户名/密码)

  3. 3

    创建Windows Phone 8应用并将其连接到数据库的最佳方法(最好是SQL Server)

  4. 4

    为什么Java中的System.out.println()打印到控制台?

  5. 5

    卷曲函数无法解析来自bash中变量的代理

  6. 6

    是什么在Android的consumer-rules.pro和proguard-rules.pro之间的区别?

  7. 7

    设置与Apache POI Excel表散点图标记图标的颜色

  8. 8

    将Qt Pyside2与asyncio await语法一起使用?

  9. 9

    崇高的文字+蟒蛇的蟒蛇

  10. 10

    任务':app:minifyReleaseWithR8'.java.lang.NullPointerException的执行失败(无错误消息)

  11. 11

    OpenJDK的和AdoptOpenJDK的区别

  12. 12

    大型数据集缓存到Spark内存中时,“超出了GC开销限制”(通过sparklyr和RStudio)

  13. 13

    “执行测试CMAKE_HAVE_LIBC_PTHREAD”失败实际上是什么意思?

  14. 14

    使用Core 2.2中的Identity,如何在关闭浏览器15分钟后保持会话活动?

  15. 15

    React中的ForwardRefExoticComponent和ForwardRefRenderFunction有什么区别?

  16. 16

    猫鼬查找结果,然后将字段替换为findOne

  17. 17

    如何降级Google Colab的Torch版本

  18. 18

    Keras提前停止回调错误,val_loss指标不可用

  19. 19

    如何避免VSCode中的“导入路径不能以.ts扩展名结尾”错误?

  20. 20

    Nuxt.JS:如何在页面中获取路由URL参数

  21. 21

    是否有为什么会AccessibilityManager.sInstance导致内存泄漏的一个原因?

热门标签

归档