如何在Angular中使用bootstrap4纠正小型设备的响应代码

问题描述

在我的角度应用程序中，我创建了整个宽度的地图，并在整个地图上使用引导程序在右上角和整个底部创建了两个重叠的分量。

注意：以上重叠的组件在地图下是透明的。

它在台式机和大型设备上都可以正常工作，但在小型设备上却没有显示响应页面（覆盖整个地图的重叠组件）

现在我的要求是使用引导程序（例如.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>

.component.css

.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,#000000 74%);
  opacity: 0.6;
  overflow: auto;

}

我要先覆盖2类，然后再映射，然后再针对小型设备覆盖2类。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）