Angular 如何使用bootstrap在具有不透明度的网格系统中逐个放置元素

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

现在，我想先将地图放置在整个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>

我已经尝试了很多方法，但我不能做到这一点

---

有谁能帮我解决这个问题吗？请用css将您的

选项卡内容
放入您的地图，如下所示：

.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 */
}

演示

#地图{
高度：550px；
边框：1px纯色灰色；
左边距：5px；
位置：相对位置；
}
.选项卡内容{
位置：绝对位置；
最高：50%；
右：0；
转化：translateY（-50%）；
高度：200px；/*例如添加*/
宽度：200px；/*例如添加*/
背景：红色；/*例如添加*/
}















Bootstrap 3或4？我正在使用Bootstrap 4我已经尝试了很多方法，但都不起作用。请您帮助我为上述代码使用Bootstrap对组件进行分层。只是为了确保，您希望
tab content
位于右侧的地图中吗？是的，我希望该选项卡内容位于地图的右侧谢谢，但是选项卡内容必须在顶部，即边距为0，只需更改为：50%到0即可删除转换。
.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 */
}