Twitter bootstrap 如何在angular中使用bootstrap4校正小型设备的响应代码

在我的angular应用程序中，我创建了整个宽度的贴图，在贴图上方，我使用引导创建了右上角和整个底部的两个重叠组件

注：上述重叠组件在贴图下是透明的

它适用于台式机和大型设备，但小型设备它不显示响应页面（覆盖整个地图的重叠组件）

现在，我的要求是为所有使用引导的设备（如.visible sm、类等）放置响应代码

我已经试过了，但没有正常工作，我是新手

.component.html

<div id="map" class="container-fluid hidden-phone " style="height: 135vh" >

  <div class="row">
    <div class="col-xs-12 col-sm-8 col-lg-12 mapContainer">
      
<div class="overlay2 visible-phone " >
    <div class="col-xs-12 col-sm-10 col-lg-12">

      <ul class="nav nav-tabs border-0" style="border: none;">
        <li class="nav-item ">
          <a href="#Drones" class="nav-link border border-default border-bottom-0 active" data-toggle="tab"
       id="tabstyle" style=" font-size: 20px; color: red; font-weight: 500;">
            data-1</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link border border-default border-bottom-0" data-toggle="tab" id="tabstyle"
            style=" font-size: 20px; color:  red;font-weight: 500;">data-2</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link border border-default border-bottom-0" data-toggle="tab" id="tabstyle"
            style=" font-size: 20px; color:  red;font-weight: 500;">data-3</a>
        </li>
      </ul>
     
      <div class="tab-content">

        <div class="tab-pane fade show active" id="x">

          <ul class="list-group card" id="dd">
<li class="list-group-item" *ngFor="let x of wifiDrones" style="padding:5px 5px; ">
      <!--some data-->       
 </li>
  </ul>

        </div>

<div class="tab-pane fade" id="yy">

          <ul class="list-group card" id="dd">
            <li class="list-group-item" >
             <!-- some data
           </li>
          </ul>

        </div>

<div class="tab-pane fade" id="zz">

          <ul class="list-group card" id="dd">
            <li class="list-group-item" >
             <!-- some data
           </li>
          </ul>

        </div>

<div class="row">
    <div class="overlay">
      <div class="col-xs-12 col-sm-8 col-lg-11" >
        <h5 style="color: white;">Output Stream</h5>
       
        <span *ngIf="imageurl != ''">
          <img src="{{imageurl}}" class="img-responsive" width="325" height="275" id="outputstream" />
        </span>
        <span *ngIf="imageurl == ''" style="width:400px;height:275px;">
         
          <h5 style="padding:125px 75px;border: 1px solid #f8f8f8;text-align: center;color: white;">No Video feed</h5>
        </span>
</div>

  </div>
</div>
  </div>
</div>
</div>

我想覆盖2类在第一和地图，然后覆盖2类的小型设备

.overlay {
  position: absolute;
  width: 800px;
  left: 0;
  bottom: 0;
 background-image: linear-gradient(315deg, #2d3436 0%, #000000 74%);
opacity: 0.8;
  z-index: 1000;
  top: 550px;
  height: 325px;
}

.overlay2 {
  position: absolute;
  width: 525px;
  height: 425px;
top: 0;
margin-top: 55px;
  right: 0;
  bottom: 0;
  z-index: 1000;
  background-image: linear-gradient(315deg, #2d3436 0%, #000000 74%);
  opacity: 0.6;
  overflow: auto;

}