Partage

(Bootstrap) Deux tabs mélangées en une

12 octobre 2017 à 11:52:42

Bonjour,

J'ai actuellement un problème avec Bootstrap 4 et je ne sais comment le résoudre, c'est pour cela que je me dirige vers vous. En effet, j'ai un problème avec une tab, veuillez trouver ci dessous le code ainsi que l'explication du problème :

div class="container">
<div class="row">
    <div class="col-md-3">
        <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist">
            <a class="nav-link active" id="v-pills-accounts-tab" data-toggle="pill" href="#v-pills-accounts" role="tab" aria-controls="v-pills-accounts" aria-expanded="true">Compte</a>
            <a class="nav-link" id="v-pills-sanction-tab" data-toggle="pill" href="#v-pills-sanction" role="tab" aria-controls="v-pills-sanction" aria-expanded="true">Sanctionner</a>
            <a class="nav-link" id="v-pills-recup-tab" data-toggle="pill" href="#v-pills-recup" role="tab" aria-controls="v-pills-recup" aria-expanded="true">Récupération</a>
            <a class="nav-link" id="v-pills-ban-tab" data-toggle="pill" href="#v-pills-ban" role="tab" aria-controls="v-pills-ban" aria-expanded="true">Bannissement</a>
        </div>
    </div>
    <div class="col-md-9">
        <div class="tab-content" id="v-pills-admin">
            <div class="tab-pane fade show active" id="v-pills-accounts" role="tabpanel" aria-labelledby="v-pills-accounts-tab">{{ include("LMRPPlatformBundle:Subviews_Admin:Accounts.html.twig") }}</div>
            <div class="tab-pane fade" id="v-pills-sanction" role="tabpanel" aria-labelledby="v-pills-sanction-tab">{{ include("LMRPPlatformBundle:Subviews_Admin:Jail.html.twig") }}</div>
            <div class="tab-pane fade" id="v-pills-recup" role="tabpanel" aria-labelledby="v-pills-recup-tab">{{ include("LMRPPlatformBundle:Subviews_Admin:Recuperation.html.twig") }}</div>
            <div class="tab-pane fade" id="v-pills-ban" role="tabpanel" aria-labelledby="v-pills-ban-tab"></div>
        </div>
    </div>
</div>

Quand je switch de v-pills-accounts-tab vers une autre tab ou de v-pills-sanction-tab vers une autre il n'y a aucun soucis tout fonctionne à merveille. Mais quand je switch de v-pills-recup-tab vers une autre tab, cette dernière se mélange avec celle où je me suis dirigé.

J'ai analysé mon code sur mon navigateur web et toutes les balises html sont bien fermées donc actuellement je n'ai aucune issue de secours pour ce problème.

En vous remerciant d'avance pour votre aide :D

(Bootstrap) Deux tabs mélangées en une

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
  • Editeur
  • Markdown