Bootstrap 4 对绝对定位元素的响应

Question

我想在我的网页中实现这种屏幕。绝对定位元素是黄色容器。我为每个像素都写了一个媒体，但没有提供优化的响应能力。 bootstrap 4 中是否有任何 class 可以像这样定位并使其在所有设备上响应而无需显式编写媒体查询？提前致谢。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<style>
.sample{
  position:relative;
}

.ml-lg-1{
  position: absolute;
  top:25vh;
  left:-37vw;
}

@media (min-width:1340px){
.ml-lg-1{
position: absolute;
  top:25vh;
  left:-34vw;
  }
}
@media (min-width:1050px){
.ml-lg-1{
position: absolute;
  top:25vh;
  left:-36vw;
  }
}
@media (min-width:1100px){
.ml-lg-1{
position: absolute;
  top:25vh;
  left:-34vw;
  }
}
@media (min-width:1200px){
.ml-lg-1{
position: absolute;
  top:25vh;
  left:-37vw;
  }
}
@media (min-width:1300px){
.ml-lg-1{
position: absolute;
  top:25vh;
  left:-34vw;
  }
}

@media (min-width:1380px){
.ml-lg-1{
position: absolute;
  top:25vh;
  left:-31vw;
  }
}
@media (min-width:1705px){
.ml-lg-1{
position: absolute;
  top:25vh;
  left:-24vw;
  }
}
</style>
<body>
<div class="container sample">
   <div class="row">
    <div class="columns col-sm-4" style="background:red;height:100vh;">
    First
    </div>
    <div class="columns col-sm-4" style="background:green;height:100vh;">
    Second
    </div>
    <div class="columns col-sm-4 third">
    Third
    <div class="container test ml-lg-1">
      <div class="row">
       <div class="col-sm-4" style="background:yellow;height:100px;width:100px;">
         Test1
       </div>
      
      </div>
    </div>
    </div>    
   </div>
</div>
</body>
</html>

Answer 1

我只添加了两列，但您可以使用它，它会为您指明方向。不需要绝对定位。您可以按如下方式使用网格系统：

<div class="container">
  <div class="row">
    <div class="col red">
      1 of 2
    </div>
    <div class="col green">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col-4 red">
      1 of 3
    </div>
    <div class="col-2 yellow">
      2 of 3
    </div>
    <div class="col-6 green">
      3 of 3
    </div>
  </div>  
  <div class="row">
    <div class="col red">
      1 of 2
    </div>
    <div class="col green">
      2 of 2
    </div>
  </div>
</div>

这里是 css:

    .row {
  background: #f8f9fa;
  margin-top: 0px;
}

.col- {
  border: solid 1px #6c757d;
  padding: 10px;
}
.yellow{
  background-color:yellow;
}
.red{
  background-color:red;
}
.green{
  background-color:green;
}

here is a fiddle

Answer 2

在%中给出top和left距离。

.ml-lg-1 {
    position: absolute;
    top: 25%;
    left: -125%;
}

我希望这是你所期待的。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<style>
.sample{
  position:relative;
}


.ml-lg-1 {
    position: absolute;
    top: 25%;
    left: -125%;
}


</style>
<body>
<div class="container sample">
   <div class="row">
    <div class="columns col-sm-4" style="background:red;height:100vh;">
    First
    </div>
    <div class="columns col-sm-4" style="background:green;height:100vh;">
    Second
    </div>
    <div class="columns col-sm-4 third">
    Third
    <div class="container test ml-lg-1">
      <div class="row">
       <div class="col-sm-4" style="background:yellow;height:100px;width:100px;">
         Test1
       </div>
      
      </div>
    </div>
    </div>    
   </div>
</div>
</body>
</html>

Bootstrap 4 对绝对定位元素的响应

Bootstrap 4 responsiveness for absolute positioned elements

html

bootstrap-4

responsive