Bootstrap 4 col 中宽度为 100% 的绝对定位 div 溢出答案

【问题标题】：Absolute positioned div with width 100% overflows in Bootstrap 4 colBootstrap 4 col 中宽度为 100% 的绝对定位 div 溢出
【发布时间】：2018-10-11 19:53:43
【问题描述】：

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

有什么想法吗？

https://codepen.io/anon/pen/RyVPZe

问候！

【问题讨论】：

标签： html css bootstrap-4

【解决方案1】：

此问题是因为父 <div class="col"> 具有样式 padding-left: 15px; padding-right 15px，而子 <div class="image-text p-4"> 具有 position: absolute。由于绝对位置忽略了父级的填充（参考：Absolute positioning ignoring padding of parent），所以孩子的宽度是expected width + padding-left + padding-right。

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

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

.wrapper { 位置：绝对；底部：0；左：0；宽度：100%；填充左：15px； padding-right: 15px; }

并从孩子身上删除position: absolute; bottom: 0; width: 100%。请参考示例：https://codepen.io/prasadkothavale/pen/xjdwjB

【讨论】：

【解决方案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);
}
}

【讨论】：