如何使用引导程序将div稍微放在图像上

Question

div nudged slightly over an image

我已在上面附上一张我想做什么的图片... 我想将div稍微放在图像上-这很容易-但是我想使用bootstrap来实现。或者，请尽量使用引导网格，以使这两个对象完全响应。

这是执行我想要的代码，但是我想使用bootstrap做到这一点-使用bootstrap是我的主要目标。

album_images

谢谢。

Answer 1

我试图用bootstrap实现，这是我的代码。我没有为超小型设备编写媒体查询，因为它取决于您如何在该设备上设置样式。

关于codepen：

https://codepen.io/jaspal9755/pen/WKvLBX?editors=1100

html

<div class="container-fluid">
  <div class="wrapper">
    <div class="row">
      <div class="col-sm-6">
        <img class="img-fluid" src="https://images.pexels.com/photos/2755/restaurant.jpg?auto=compress&cs=tinysrgb&h=350" alt="" />
      </div>
      <div class="col-sm-6">
        <div class="wrap-heading">
            <h1>This text is on top of the image</h1>
        </div>
      </div>
    </div>
  </div>
</div>

css

*{
  padding:0;
  margin:0;
}
.wrapper{
  position:relative;
  padding:10px;
}
h1{
  border: 2px solid;
  font-size:30px;
  padding:15px;
}
.wrap-heading{
  position:absolute;
  top:40%;
  left:-25%;
}

@media(min-width:767px) and (max-width:992px){
  h1{
    font-size:25px;
  }
}
@media(min-width:576px) and (max-width:768px){
  h1{
    font-size:20px;
  }
}