如何使用引导程序在不透明的网格系统中一一放置元素

问题描述

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

现在，我要先将整个12个网格放置在地图上，然后在地图下放置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;
}

我尝试了很多方法，但我无法做到这一点。

有人可以帮我吗

解决方法

Jus使用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>