Question

我尝试在Bootstrap 4.1 col absolute中放置宽度为100％的div，将其附加到底部。但我的问题是，它在右边溢出。我将position: relative;分配给了父母，但没有任何效果。

有什么想法吗？

问候！

Answer 1

此问题是由于父<div class="col">的样式padding-left: 15px; padding-right 15px，其中<div class="image-text p-4">为position: absolute expected width。由于绝对位置忽略父级的填充（请参阅：Absolute positioning ignoring padding of parent），您孩子的宽度为padding-left + padding-right + <div class="col" style="padding:0">。

您可以使用以下方法之一解决此问题：

如果不需要，请从父级中删除填充<div class="wrapper">。例如：https://codepen.io/prasadkothavale/pen/jxmbww
如果你想保持填充，那么你需要在绝对子<div class="image-text p-4">上添加一个包装position: absolute; bottom: 0; width: 100%并添加以下CSS：

.wrapper { 位置：绝对; 底部：0; 左：0; 宽度：100％; padding-left：15px; padding-right：15px; }

并从孩子身上移除*(latest version)* I have one。请参考示例：https://codepen.io/prasadkothavale/pen/xjdwjB

Answer 2

请使用 left：0px; 喜欢（scss）并使用 no-gutters

行中的课程

<div class="row no-gutters"></div>

.image-box {
.image-text {
    position: absolute;
    width: 100%;
    bottom: 0;
    color: white;
    left: 0px;
    background: rgba(0, 0, 0, 0.6);
}
}

在Bootstrap 4 col中，宽度为100％的绝对定位div溢出

2 个答案: