web-dev-qa-db-fra.com

Comment désactiver l'empilement de bootstrap onglets justifiés sur de petits écrans

J'ai vu cet article , mais étant un nouvel utilisateur, je ne peux pas commenter pour demander des éclaircissements.

J'utilise les onglets de navigation justifiés dans Bootstrap et je ne veux pas qu'ils s'empilent sur de petits écrans, car je n'ai que 2 onglets. Je voudrais qu'ils restent côte à côte, rétrécissez simplement vers le bas pour s'adapter à l'écran. Voici ce que j'ai:

    <!-- Nav tabs -->
<ul class="nav nav-tabs nav-justified" id="myTab">
  <li class="active"><a href="#ratings" data-toggle="tab">Ratings</a></li>
  <li><a href="#reviews" data-toggle="tab">Reviews</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="ratings">This is a rating section</div>
  <div class="tab-pane" id="reviews">This is for reviews. There should be some styling here.</div>
</div>

Comme le post connexe suggère d'utiliser des requêtes multimédias, je n'arrive pas à faire fonctionner cela. J'avais essayé de régler ce qui suit pour cibler uniquement les petits écrans:

    @media (max-width: 768px) {
  .nav-justified > li {display: table-cell;}
}

Je ne suis pas sûr de ce que je fais mal, donc toute aide est grandement appréciée.

csstwitter-bootstrapnavbar
33
user2654108

Essayez d'ajouter col-xs-6 avant les liens

    <!-- Nav tabs -->
<ul class="nav nav-tabs nav-justified" id="myTab">
  <div class="col-xs-6">
      <li class="active"><a href="#ratings" data-toggle="tab">Ratings</a></li>
  </div>    
  <div class="col-xs-6">    
      <li><a href="#reviews" data-toggle="tab">Reviews</a></li>
  </div>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="ratings">This is a rating section</div>
  <div class="tab-pane" id="reviews">This is for reviews. There should be some styling here.</div>
</div>

vous pouvez le vérifier ici Bootply

6
colinplusplus

Le problème avec certaines des autres solutions est que les onglets perdront leurs bordures et autres éléments de conception. Les requêtes multimédias suivantes garantissent plus complètement la correspondance des onglets dans les écrans condensés et plus larges:

@media (max-width: 768px) {
  .nav-justified > li {
    display: table-cell;
    width: 1%;
  }
  .nav-justified > li > a  {
    border-bottom: 1px solid #ddd !important;
    border-radius: 4px 4px 0 0 !important;
    margin-bottom: 0 !important;
  }
}
51
pjb

J'ai tenté de modifier la réponse @pjb car elle est incomplète. Mais ma modification a été rejetée, deux fois, car apparemment elle est "incorrecte". Bien que le plongeur aurait tendance à être en désaccord ...

Il s'agit de l'original qui montre que la bordure inférieure des onglets actifs s'affiche lorsqu'elle est condensée

http://plnkr.co/edit/p62KlHnqPjAsK7XR3mLa?p=preview

Et cette version, où elle ne s'affiche clairement pas

http://plnkr.co/edit/BBDW7nIxGh0J6a9vsuZx?p=preview

@media (max-width: 768px) {
  .nav-justified > li {
    display: table-cell;
    width: 1%;
  }
  .nav-justified > li > a  {
    border-bottom: 1px solid #ddd !important;
    border-radius: 4px 4px 0 0 !important;
    margin-bottom: 0 !important;
  }
  .nav-tabs.nav-justified > .active > a,
  .nav-tabs.nav-justified > .active > a:hover,
  .nav-tabs.nav-justified > .active > a:focus {
    border-bottom-color: #fff !important;
  }
}
11
james

Il existe un moyen très simple d'empêcher l'empilement:

CSS:

.nav li {
    display:table-cell !important;
}

J'ai cherché cela et j'ai été ennuyé par les réponses impliquant la construction personnalisée bootstrap (j'utilise CDN) et LESS (que je n'utilise pas)

Cela fonctionne très bien pour moi ...

10
mattdlockyer

En plus de la réponse de James, si vous ne voulez pas limiter la largeur maximale à 768 pixels, vous pouvez faire:

@media (min-width: 0px) {

  .nav-justified > li {
    display: table-cell;
    width: 1%;
  }

}

Dois-je éviter d'utiliser! Important en CSS?

Si vous préférez éviter d'utiliser !important en CSS collez le code après l'inclusion bootstrap.

7
RafaSashi

Une autre solution simple consiste à ajouter la classe flex à <ul> élément au lieu de nav-justified

.just {
  display: flex;
  flex-flow: row nowrap;
}

.just > li {
  flex: 1 auto;
  text-align: center;
  white-space: nowrap;
}

jsFiddle
Notez qu'en cas de nombreux onglets, certains d'entre eux peuvent passer derrière votre écran. Pour éviter cela, vous pouvez ajouter wrap au lieu de nowrap au flex flow. De cette façon, ils seront en effet empilés, mais uniquement dans le cas où les choses se placeraient normalement derrière l'écran, ce qui signifie que le point d'arrêt pour l'empilement warp est plus petit qu'en cas de nav-justified. Allez-y et utilisez row wrap sur mon Fiddle et redimensionnez l'écran pour voir de quoi je parle.

5
NightKn8

Et l'édition de la réponse de pjb, conserve même le style par défaut pour bootstrap barre de navigation justifiée.

@media (max-width: 768px){
    .nav-justified > li {
        display: table-cell;
        width: 1%;
  }
    .nav-justified > li > a  {
        border-bottom: 1px solid #ddd !important;
        border-radius: 4px 4px 0 0 !important;
        margin-bottom: 0 !important;
  }
    .nav-justified > li.active > a  {
        border-bottom: 1px solid transparent !important;
  }

}
2
Sikhumbuzo Dlamini

Cela dépend beaucoup si vous souhaitez conserver la valeur par défaut bootstrap et ajoutez simplement votre thème personnalisé en haut. La plupart du temps, cela a du sens car vous voudrez peut-être avoir des onglets empilés pour mobile plus tard sur la piste si votre liste d'onglets passe à 3 ou 4, etc. Ce que je ferais, c'est ajouter une nouvelle classe à ul "custom-not-stacked" puis ajouter ce css à votre feuille de style:

.nav-justified.custom-not-stacked>li {
display: table-cell;
width: 1%;
}
.nav-justified.custom-not-stacked>.active>a, 
.nav-justified.custom-not-stacked>.active>a:focus, 
.nav-justified.custom-not-stacked>.active>a:hover {
border-bottom-color: #fff;
}
.nav-justified.custom-not-stacked>li>a {
border-bottom: 1px solid #ddd;
border-radius: 4px 4px 0 0;
margin-bottom: 0;
}
2
partypete25

MOINS - Bootstrap

C'est la réponse de @pjb converti en MOINS. J'utilise actuellement bootstrap.less donc voici le style que j'ai implémenté.

@media (max-width: @screen-xs-max) {

  .nav-justified {

    > li {
      display: table-cell;
      width: 1%;

      > a {
        border-bottom: 1px solid @nav-tabs-justified-link-border-color !important;
        border-radius: @border-radius-base @border-radius-base 0 0 !important;
        margin-bottom: 0 !important;
      }
    }
  }
}
0
Adrian Enriquez