如何在 bootstrap 中的两列上方重叠 div

Question

我想创建这样的东西：我想要一条只有一种颜色的条带（我可能会使用 div），它与三列重叠：

我想要实现的是这样的图层，灰色线与第 2 列和第 3 列重叠。

/* added by editor for demo purpose only */
.row > div {
  height: 80vh;
}

.row :nth-child(1) {
  background-color: red;
}

.row :nth-child(2) {
  background-color: green;
}

.row :nth-child(3) {
  background-color: blue;
}

.row :nth-child(4) {
  background-color: grey;
}

<!-- Bootstrap-4 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">


<!-- Body -->
<div class="row">
  <div class="col">
    1 of 3
  </div>
  <div class="col">
    2 of 3
  </div>
  <div class="col">
    3 of 3
  </div>
</div>

我无法将 4 重叠在 2 和 3 上。

Answer 1

给你...这里的主要技巧是 position: absolute; 使灰色框位于其他框上方。

.col-3 {
  height: 100vh;
}

#first {
  background-color: red;
}

#second {
  background-color: green;
}

#third {
  background-color: blue;
}

#fourth {
  position: absolute;
  height: 40vh;
  background-color: grey;
}

<!DOCTYPE html>
<html lang='en'>

<head>

  <meta charset='UTF-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <title>Document</title>
  <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css' integrity='sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU' crossorigin='anonymous'>
  <script src='https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.min.js' integrity='sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/' crossorigin='anonymous'></script>

</head>

<body>

  <div class='container-fluid'>
    <div class='row d-flex align-items-center'>
      <div class='col-3' id='first'></div>
      <div class='col-3' id='second'></div>
      <div class='col-3' id='third'></div>
      <div class='col-6 offset-3' id='fourth'></div>
    </div>
  </div>

</body>

</html>

如何在 bootstrap 中的两列上方重叠 div

How to overlap a div above two columns in bootstrap

html

css

bootstrap-4