如何使用bootstrap将元素一个接一个地放置在具有不透明度的网格系统中

Question

我有一个角度应用程序，我创建了仪表板页面。在仪表板页面中，我使用传单地图创建了地图，数据必须放在地图的右侧。

现在我想首先放置整个12个网格的地图，并且在地图下面，我必须使用bootstrap放置5个网格宽度的3个选项卡链接的数据

我试过了，但标签链接在地图后面，但我想使用引导程序显示地图上右侧的不透明度标签链接。

dashboard.component.html

<div class="row">
<div class="col-xs-12 col-sm-8 col-lg-12">
<div class="row">
<div class="col-xs-12 col-sm-8 col-lg-12"  >
<div id="map">
</div>

</div>
<div class="col-xs-12 col-sm-8 col-lg-7"  >
</div>
<!--<div class="col-xs-12 col-sm-8 col-lg-5">-->
<div class="col-xs-12 col-sm-8 col-lg-5" style="float: right; opacity: 0.4; z-index: 1;" >
<ul class="nav nav-tabs border-0">
<li class="nav-item ">
<a href="#xx" class="nav-link border border-default border-bottom-0 active" data-toggle="tab"
id="tabstyle" style=" font-size: 20px; color: red; font-weight: 500;">
Drones</a>
</li>
<li class="nav-item">
<a href="#yy" class="nav-link border border-default border-bottom-0" data-toggle="tab" id="tabstyle"
style=" font-size: 20px; color:  red;font-weight: 500;">Jammers</a>
</li>
<li class="nav-item">
<a href="#zz" class="nav-link border border-default border-bottom-0" data-toggle="tab" id="tabstyle"
style=" font-size: 20px; color:  red;font-weight: 500;">Sensors</a>
</li>
</ul>

<div class="tab-content">
<div class="tab-pane fade show active" id="xx">
<ul class="list-group card" id="dd">

</ul>
</div>
<div class="tab-pane fade" id="yy">
<ul class="list-group card" id="dd">

</ul>
</div>
<div class="tab-pane fade " id="zz">
<ul class="list-group card" id="dd">

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

component.css

#map{
height: 550px;
border: 1px solid gray;
margin-left: 5px;
position: relative;
}

我已经尝试了很多方法，但我做不到。

有人能帮我处理这个吗

Answer 1

Just使用css将tab-content放入地图中，如下所示：

.tab-content{
position: absolute;
top: 50%;
right:0;
transform: translateY(-50%);
height: 200px;  /* ADDED for example */
width: 200px;   /* ADDED for example */
background: red; /* ADDED for example */
}

演示

#map{
height: 550px;
border: 1px solid gray;
margin-left: 5px;
position: relative;
}
.tab-content{
position: absolute;
top: 50%;
right:0;
transform: translateY(-50%);
height: 200px;  /* ADDED for example */
width: 200px;   /* ADDED for example */
background: red; /* ADDED for example */
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<div class="row">
<div class="col-xs-12 col-sm-8 col-lg-12">
<div class="row">
<div class="col-xs-12 col-sm-8 col-lg-12"  >
<div id="map">
<div class="tab-content">
<div class="tab-pane fade show active" id="xx">
<ul class="list-group card" id="dd">
</ul>
</div>
<div class="tab-pane fade" id="yy">
<ul class="list-group card" id="dd">
</ul>
</div>
<div class="tab-pane fade " id="zz">
<ul class="list-group card" id="dd">
</ul>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-8 col-lg-7"  >
</div>
<!--<div class="col-xs-12 col-sm-8 col-lg-5">-->
<div class="col-xs-12 col-sm-8 col-lg-5" style="float: right; opacity: 0.4; z-index: 1;" >
<ul class="nav nav-tabs border-0">
<li class="nav-item ">
<a href="#xx" class="nav-link border border-default border-bottom-0 active" data-toggle="tab"
id="tabstyle" style=" font-size: 20px; color: red; font-weight: 500;">
Drones</a>
</li>
<li class="nav-item">
<a href="#yy" class="nav-link border border-default border-bottom-0" data-toggle="tab" id="tabstyle"
style=" font-size: 20px; color:  red;font-weight: 500;">Jammers</a>
</li>
<li class="nav-item">
<a href="#zz" class="nav-link border border-default border-bottom-0" data-toggle="tab" id="tabstyle"
style=" font-size: 20px; color:  red;font-weight: 500;">Sensors</a>
</li>
</ul>
</div>
</div>
</div>
</div>