Question

我想在我的网页上实现这种屏幕。绝对定位的元素是黄色容器。我已经为每个像素写了一种无法提供最佳响应速度的媒体。引导程序4中是否有任何类可以像这样定位并使其在所有设备上响应，而不必显式编写媒体查询？提前谢谢。

var express = require('express')
var bodyParser = require('body-parser')

var server = express()

// parse various different custom JSON types as JSON
server.use(bodyParser.json({ type: 'application/*+json' }))

server.post('/api', async function v1(req, res)
{
  let x = req.body;
  ...
}

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对绝对定位元素的响应

2 个答案: