Question

我想在较小的屏幕上使页面具有响应性。

我没有为此使用bootsrtap，现在是这样。可能我应该但不确定是否可以：可以使用引导程序进行此绝对定位吗？

非常感谢，我希望图纸足够清楚

<div class="container-map">
        <div class="top-container">
            <div class="map-background">

            </div>
            <div class="map-filter">

            </div>
        </div>

        <div class="map-search-results">

        </div>
    </div>

和CSS

.top-container{
   height:100%;
   position:relative;
}

.map-background {
  z-index: 10;
  width: 100%;
  height: 100%;
}
.map-filter {
  z-index: 1000;
  top:5%;
  left:7%;
  min-height:50px;
  min-width:200px;
  position: absolute;
}
.map-search-results{
    width: 100%;
}

这就是我想要的：

Answer 1

* {
  margin: 0;
  padding: 0;
}

.map-bg {
  background: url('https://www.ryansleeper.com/wp-content/uploads/2018/05/Tableau-Sales-by-State-Symbol-Map-with-Background-Map.png');
  background-size: cover;
  padding: 100px 20px;
}

.key-results {
  padding: 40px 20px;
}

@media screen and (max-width: 767px) {
  .map-bg {
    background: none !important;
    padding: 40px 20px !important;
  }

}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<section class="map-bg">
  <div class="container">
    <div class="row">
      <div class="col-md-6 col-sm-12 col-lg-6 col-12">
          <p>
            What is Lorem Ipsum?
            <br>
            <br>
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
          </p>
      </div>
    </div>
  </div>
</section>
<section class="key-results">
  <div class="container">
    <div class="row">
      <div class="col-12">
          <p>
            What is Lorem Ipsum?
            <br>
            <br>
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
          </p>
      </div>
    </div>
  </div>
</section>
</body>
</html>

如果您需要在小型设备上使用地图背景，只需删除媒体查询即可。希望对您有所帮助：）

Answer 2

这可能会有所帮助。

   body, html{
      padding:0;
      margin:0;
    }
   .top-container{
   height:100%;
   position:relative;
}

.map-background {
  z-index: 10;
 width:100%;
 height: 500px;
  background:lightblue;
}
.map-filter {
  z-index: 1000;
  top:5%;
  left:7%;
  min-height:50px;
  min-width:200px;
  position: absolute;
  border:5px solid red;
}
.map-search-results{
    padding:20px;
    border:5px solid orange;
}
@media (max-width:767px){
  .map-filter{
    position: relative;
    left:0;
    top:0;
    margin-top: 20px;
    margin-bottom: 20px;
    padding:20px;
  }
}

  <div class="container-map">
      <div class="top-container">
          <div class="map-background">

          </div>
          <div class="map-filter">
            <h2>map filetr</h2>
          </div>
      </div>

      <div class="map-search-results">
        <h2>map search</h2>
      </div>
  </div>

绝对位置（组件上的组件）-如何使其具有响应性？引导程序4

2 个答案: