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

【问题标题】：Bootstrap 4 responsiveness for absolute positioned elementsBootstrap 4 对绝对定位元素的响应
【发布时间】：2020-05-09 09:10:23
【问题描述】：

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

<!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>

【问题讨论】：

你期望的操作是什么
你可能需要嵌套getbootstrap.com/docs/4.0/layout/grid/#nesting
我想要一个像上面这样的输出，而不必显式地编写媒体查询。 @AmareshSM 请在整页中查看输出你会知道我的意图
查看我的答案@LakshmiS

标签： html bootstrap-4 responsive

【解决方案1】：

在% 中给出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>

【讨论】：

非常感谢。这是我所期望的。再次感谢@AmareshSM

【解决方案2】：

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

<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

【讨论】：

@LakshmiS 这里是 BS4 网格源的链接getbootstrap.com/docs/4.0/layout/grid
嗨。马特我已经通过了网格系统。我想实现我的代码中提到的输出。我写了媒体查询。我想避免编写媒体查询来实现该输出。请查看完整页面的输出你会知道我的意图