问题描述
在我的角度应用程序中,我创建了整个宽度的地图,并使用引导程序在地图的右上角和左下角创建了两个重叠的分量。
对于桌面设备来说,它工作正常,但是对于小型设备,它却没有显示响应页面(覆盖整个地图的重叠组件)
现在,我的要求是为所有使用bootstarp的设备(如.visible-mobile,.hidden-tablet类等)放置响应代码。
我已经尝试过但不能正常工作,并且是我的新手。
.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 (将#修改为@)