网格系统不使用引导选项卡

Question

我正在处理选项卡区域。我通过容器使用行系统。但是这些行不适用于选项卡。我在css文件中发现了问题。但是我解决不了。

[我想使用这个选定的区域

<div class="tab-content" id="myTabContent">
                                <div class="tab-pane fade show active row " 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>

]1

问题类是 tab-content 和 tab-pane。这种风格代码在这里； `.tab-content>.tab-pane { 显示：无； }

.tab-content>.active { 显示：块； `

请帮帮我，我现在不知道该怎么办：/

Answer 1

您的问题和未来问题的路径是容器和行的结构不正确。理想情况下，对于正确的 Bootstrap，您的结构应该是。

<section>
   <div class="container">
     <div class="row">
       <div class="col-sm-12">
          <!-- Your tabs here -->

您不应该在其他元素中包含容器和行。您应该将选项卡和相关元素放在一列中。所有列都在一行内。所有行都在容器内。

Answer 2

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="kt_vtab_pane_2" role="tabpanel">
    <div>
      <div class="row">
        <div class="col">
            <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">
            <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>