Im working on a tabs area. Im using row system via container. But the rows are doesnt work with the tabs. I find the problem in css file. But i cant solve it.
[i want to use this selected area
<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
The problem class is tab-content and tab-pane. This style codes are here ; `.tab-content>.tab-pane { display: none; }
.tab-content>.active { display: block; `
please help me i dont now what will i do :/
CodePudding user response：
The route of your problem and problems to come is having containers and rows structured incorrectly. Ideally and for proper Bootstrap your structure should be.
<section>
<div class="container">
<div class="row">
<div class="col-sm-12">
<!-- Your tabs here -->
You should not have containers and rows inside other elements. You should put your tabs and related elements inside a column. All columns are inside a row. All rows are inside containers.
CodePudding user response：
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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>