html - 填充在绝对 div 父 bootstrap 4 中不起作用

Question

我使用 bootstrap4 在另一个 div 的 relative 位置添加 div 和 absolute 位置，如下所示:

.p-r{
  padding:8px;
  background-color:#ddd;
  height:100px;
}
.p-a{
  bottom:3px;
  background-color:#000
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<div class="container">
  <div class="row">
    <div class="col-md-6">
      <div class="p-r position-relative">
        <div class="p-a position-absolute w-100">
          text
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="p-r position-relative">
        <div class="p-a position-absolute w-100">
          text
        </div>
      </div>
    </div>
  </div>
</div>

但实际上，padding 在 absolute div 中并不真正起作用:

Answer 1

那是因为您设置了 w-100，这意味着子 div 的 width: 100% !important。

要解决此问题，请将子 div 宽度设置为 width: calc(100% - 16px);

.p-r {
  padding: 8px;
  background-color: #ddd;
  height: 100px;
}

.p-a {
  bottom: 3px;
  background-color: #000;
  width: calc(100% - 16px);
}

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<div class="container">
  <div class="row">
    <div class="col-md-6">
      <div class="p-r position-relative">
        <div class="p-a position-absolute">
          text
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="p-r position-relative">
        <div class="p-a position-absolute">
          text
        </div>
      </div>
    </div>
  </div>
</div>