Une barre de navigation flexible NAVIGATION:Flexible

Comme la classe .nav est basée sur Flexbox, nous pouvons créer des barres de navigation qui s’adaptent selon la taille de l’écran.

Voici le code utilisé pour cet exemple :

<nav class="nav nav-pills flex-column flex-sm-row"> 
    <a class="nav-link active" href="#">Lorem</a> 
    <a class="nav-link" href="#">Ipsum</a> 
    <a class="nav-link" href="#">Adipiscing</a> 
    <a class="nav-link" href="#">Amet</a> 
</nav> 

L’élément <nav> utilise la classe .flex-column pour indiquer que par défaut, les éléments enfants doivent s’afficher en colonne, les uns sous les autres. Puis nous avons la classe .flex-sm-row qui indique que les éléments doivent s’afficher en ligne pour les petits écrans et plus. C’est donc cette règle qui s’applique sur les écrans de petite taille et les plus grands. Pour les écrans très petits, de taille inférieure à 576 pixels, c’est l’affichage vertical qui est utilisé.

Voici l’affichage sur un petit écran et supérieur :

images/C10-008.png

Voici l’affichage obtenu sur un très petit écran :

images/C10-009.png
couv_OW5BOO.png

Découvrez 

le livre :

Aussi inclus dans nos :

Précédent
Les options de mise en forme
Suivant
Une barre de navigation avec bouton déroulant