Bootstrap 4 отзывчивости для элементов с абсолютным позиционированием - PullRequest
Новая
       22

Bootstrap 4 отзывчивости для элементов с абсолютным позиционированием

2 голосов
/ 23 января 2020

Я хотел бы добиться такого вида экрана на моей веб-странице. Абсолютно позиционируемый элемент - контейнер желтого цвета. Я написал носитель для каждого пикселя, который не дает оптимизированной реакции. Есть ли в 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>

Ответы [ 2 ]

0 голосов
/ 23 января 2020

Дайте 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>
0 голосов
/ 23 января 2020

Я только добавил два столбца, но вы можете поиграть с ним, и он даст вам направление. нет необходимости в абсолютном позиционировании. Вы можете использовать систему сетки следующим образом: 

<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;
}

здесь скрипка

...