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

Question

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

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

我已经尝试过，但是标签链接出现在地图之后，但我想使用 bootstrap.

在地图上以不透明的方式显示标签链接

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

只需将您的 tab-content 放入您的地图中，如下所示 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 */
}

演示

#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>