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

Question

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

有什么想法吗？

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

问候!

Answer 1

这个问题是因为父<div class="col">有风格padding-left: 15px; padding-right 15px child 在哪里<div class="image-text p-4">有position: absolute .由于绝对位置忽略了父级的填充(引用:Absolute positioning ignoring padding of parent)，您 child 的宽度是 expected width + padding-left + padding-right .

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

• 如果不需要，从父项中删除填充 <div class="col" style="padding:0"> .示例:https://codepen.io/prasadkothavale/pen/jxmbww

• 如果你想保持填充，那么你需要添加一个包装器 <div class="wrapper">过绝对子<div class="image-text p-4">并添加以下 CSS:

  .包装器{ position:absolute； 底部:0； 左:0； 宽度:100%； 左填充:15px； 向右填充:15px；

并删除 position: absolute; bottom: 0; width: 100%从 child 。请引用示例:https://codepen.io/prasadkothavale/pen/xjdwjB