Home > database >  Grid System dont working with bootstrap tabs
Grid System dont working with bootstrap tabs

Time:11-11

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>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

]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>
<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

  • Related