为什么按钮与css中的图像重叠？答案

【问题标题】：Why button is overlapping with images in css?为什么按钮与css中的图像重叠？
【发布时间】：2021-08-04 14:31:47
【问题描述】：

我是网络开发的新手，并且在这个问题上停留了很长一段时间。我希望制作一个顶部有按钮的表格（在第 2 列 6 中），而不是根据按钮单击更改其下方的内容（可滚动卡片）。我尝试实现它，但我的卡片和按钮重叠如何解决这个问题，重叠使按钮无反应。

<div class="Container">
   <div class="row">
      <div class="col-md-6 ">
         <div > this is the table</div>
      </div>
      <div class="col-md-6 ">
         <div class="container">
            <div >
               <div v-for="(eachbutton, index) in getbuttons" :key="index" style="color:#ffff">
                  <button class="tablink" style="margin-bottom:12px" @click="changeList(eachWidget.displayTitle)" id="defaultOpen">{{eachbutton.displayTitle}}</button>
               </div>
            </div>
            <div v-for="(each, index) in getCarddata" :key="index" style="color:#ffff">
               <div class="col-md-4 col-12 " style="width: 200px; height:90px margin-top: 90px">
                  <div class="card mb-6" style="background-color: #050b06;">
                     <div class="row g-0  ">
                        <div class="col-md-6 col-6 w-100 h-100">
                           <img class="w-100 h-100" style="margin:11px" :src="each.ImageUrl" alt="..." />
                        </div>
                        <div class="col-md-6 col-6">
                           <p class="card-text text-episode" style="text-align: left; color:#fff;">
                              <small class="text-muted">  card</small>
                           </p>
                           <p class="card-text text-start" style="text-align: left;">
                              <small class="text-muted">text</small
                                 >
                           </p>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>

【问题讨论】：

标签： html css bootstrap-4 vuejs3 web-frontend

【解决方案1】：

我希望你使用的是 bootstrap 4 或更高版本，试试这个

<div class="Container">
   <div class="row">
      <div class="col-md-6 ">
         <div > this is the table</div>
      </div>
      <div class="col-md-6 ">
         <div class="row">
            <div class="col-md-12">
               <div v-for="(eachbutton, index) in getbuttons" :key="index" style="color:#ffff">
                  <button class="tablink" style="margin-bottom:12px" @click="changeList(eachWidget.displayTitle)" id="defaultOpen">{{eachbutton.displayTitle}}</button>
               </div>
            </div>
            <div class="col-md-12">
                <div v-for="(each, index) in getCarddata" :key="index" style="color:#ffff">
                   <div class="col-md-4 col-12 " style="width: 200px; height:90px margin-top: 90px">
                      <div class="card mb-6" style="background-color: #050b06;">
                         <div class="row g-0  ">
                            <div class="col-md-6 col-6 w-100 h-100">
                               <img class="w-100 h-100" style="margin:11px" :src="each.ImageUrl" alt="..." />
                            </div>
                            <div class="col-md-6 col-6">
                               <p class="card-text text-episode" style="text-align: left; color:#fff;">
                                  <small class="text-muted">  card</small>
                               </p>
                               <p class="card-text text-start" style="text-align: left;">
                                  <small class="text-muted">text</small
                                     >
                               </p>
                            </div>
                         </div>
                      </div>
                   </div>
                </div>
            </div>
         </div>
      </div>
   </div>
</div>

【讨论】：