Bootstrap栅格系统与tabs标签页配合使用不生效问题求助

问题根因 #

你定义的 .tab-content>.active 样式规则优先级高于Bootstrap默认的 .row 类规则，display:block 属性覆盖了栅格系统中 .row 要求的 display:flex 属性，导致栅格布局失效。

可行修复方案 #

方案1：新增CSS规则（改造成本最低） #

直接在现有CSS后新增如下规则，保证带 row 类的激活态标签页保留弹性布局属性：

/* 适配带row类的激活态tab-pane */
.tab-content>.active.row {
  display: flex;
}

无需修改现有HTML结构，新增代码后立即生效。

方案2：调整HTML结构（符合框架规范，长期维护更友好） #

不要将 row 类直接绑定在 tab-pane 标签上，将两类组件的结构拆分，修改后的代码如下：

<div class="tab-content" id="myTabContent">
  <!-- 移除tab-pane上的row类 -->
  <div class="tab-pane fade show active" id="kt_vtab_pane_2" role="tabpanel">
    <div class="container" >
      <div class="row">
        <div class="col-md-6">
          <span><b>Raporlanma Zamanı:</b> 10.11.2021 15:23</span><br>
          <span><b>Açıklama:</b> <a href="#">Havlu İsteniyor</a> </span><br>
          <span><b>Konum:</b> <a href="#">1453</a> </span>
        </div>
        <div class="col-md-6">
          <span><b>Çözüm:</b> 10 Dakika</span><br>
          <span><b>Atanan Yetkili:</b> <a href="#">Yağız Savaş</a> </span><br>
          <span><b>Görevli:</b> <a href="#">HK Runner</a> </span><br>
          <span><b>Görevli Departman:</b> <a href="#">Hause Keeping</a> </span><br>
          <span><b>Geri Arama:</b>Gerekmiyor</span><br>
          <span><b>Öncelik Seviyesi:</b>2</span>
        </div>
      </div>
    </div>
  </div>
  <div class="tab-pane fade " id="kt_vtab_pane_3" role="tabpanel">lorem</div>
  <div class="tab-pane fade" id="kt_vtab_pane_4" role="tabpanel">lorem</div>
  <div class="tab-pane fade" id="kt_vtab_pane_5" role="tabpanel">lorem</div>
</div>

拆分后完全符合Bootstrap的组件分层设计规范，不会出现后续的样式冲突问题。

内容的提问来源于stack exchange，提问作者UretimAjansi