web-dev-qa-db-fra.com

Onglets pleine largeur utilisant Bootstrap (Support IE)

J'essaie d'ajuster les onglets Bootstrap pour qu'ils couvrent toute la largeur de leur conteneur. Voici mon code (un exemple de travail minimal):

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Full Width Tabs using Bootstrap</title>
        <link href="http://Twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
        <style>
            .full-width-tabs > ul.nav.nav-tabs {
                display: table;
                width: 100%;
                table-layout: fixed; /* To make all "columns" equal width regardless of content */
            }
            .full-width-tabs > ul.nav.nav-tabs > li {
                float: none;
                display: table-cell;
            }
            .full-width-tabs > ul.nav.nav-tabs > li > a {
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div class="tabbable full-width-tabs">
            <ul class="nav nav-tabs">
                <li class="active"><a href="#tab-one" data-toggle="tab">Tab 1</a></li>
                <li><a href="#tab-two" data-toggle="tab">Tab 2</a></li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane active" id="tab-one">
                    I'm in Tab 1.
                </div>
                <div class="tab-pane" id="tab-two">
                    Howdy, I'm in Tab 2. Howdy, I'm in Tab 2. Howdy, I'm in Tab 2. Howdy, I'm in Tab 2. 
                </div>  
            </div> 
        </div> <!-- /tabbable -->

        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script src="http://netdna.bootstrapcdn.com/Twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>

    </body>
</html>

J'obtiens ce résultat (non désiré):

Undesired tabs

Cependant, je souhaite que les "en-têtes" d'onglets couvrent toute la largeur du conteneur d'onglets - et distribuent leurs largeurs individuelles de manière égale, comme suit souhaité résultat:

desired tabs

Comment puis-je y arriver?

Mise à jour 1: Voici un JSFiddle: http://jsfiddle.net/agib/FZy4n/

Mise à jour 2: J'avais déjà un widget fonctionnel utilisant du javascript personnalisé. Cependant, je recherche une solution qui s'intègre parfaitement à Bootstrap et ne repose donc que sur le javascript standard de Bootstrap.

Mise à jour 3: Si je supprime/commente

 /* table-layout: fixed; */

la largeur des en-têtes occupe tout l’espace horizontal au besoin. Cependant, leurs largeurs résultent de la longueur des textes d'en-tête et ne sont donc pas réparties de manière uniforme.

C'est pas ce que je veux non plus:

undesired tabs

Mise à jour 4: Bootstrap 3 semble contenir des onglets pleine largeur en tant que composant standard utilisant la classe .nav-justified: Bootstrap 3 -> Navs -> Justified nav

htmlcsstwitter-bootstraptabs
29
agibsen

J'ai peut-être trouvé votre solution:

Créez cette classe avec css:

.take-all-space-you-can{
    width:100%;
}

Puis appliquez cette classe à vos balises li dans votre ul. Faire ceci toutes les li prend l'espace qu'elles peuvent et divise automatiquement l'espace dans la ligne unique.

DEMO

29
rkpasia

Twitter Bootstrap 3 contient une classe pour cela, lanav-justifiedclass.

Utilisez-le comme suit:

<ul class="nav nav-tabs nav-justified">
    <li><a href="#">Foo</a></li>
    <li><a href="#">Bar</a></li>
</ul>
60
JMK

Vous pouvez utiliser javascript et jquery.

En vous appuyant sur la réponse de Nick Bull ci-dessus, vous pouvez déterminer de manière dynamique le nombre d'onglets sur la page à l'aide de Jquery.

Essayez ceci sur votre page html.

<script type="text/javascript">
   $(document).ready(function() {
       var numTabs = $('.nav-tabs').find('li').length;
       var tabWidth = 100 / numTabs;
       var tabPercent = tabWidth + "%";
       $('.nav-tabs li').width(tabPercent);
   });
</script>
5
rcheuk

Essayer 

.nav-tabs > li {
    float:none;
    display: table-cell;
    width: 1%;
}
2
Hp Lam

Essayez cette solution, juste une ligne de code pour y parvenir.

.full-width-tabs > ul > li {   width: 100%;  }

Les onglets couvriront toute la largeur de leur conteneur.

Regardez jsfiddle: http://jsfiddle.net/BhGKf/

1
Rajesh Hegde

Simple:

.nav-tabs > li {
    /* width = (100 / number of tabs). This example assumes 3 tabs. */
    width:33.33333%;
}

J'espère que cela pourra aider!

1
Nick Bull

Essayez ceci, pour tous les '.nav-pills' et chaque élément 'li' à l'intérieur avec double boucle.

function(){
$('.nav.nav-tabs').each(function(){
    var liGroup = $(this).children('li');
    var liLength= liGroup.length;
    liGroup.each(function(){
        var liWidth = 100/liLength-1;
        $(this).css({'min-width': liWidth+'%','margin-left':'0px','margin-right':'0px'});
    });
});}

DEMO http://jsfiddle.net/

0
Rene Rubio