Javascript Girl
  1. Javascript Girl
  3. Modifier le nombre de colonnes en fonction de la taille de l'écran
Intereting Posts
Comment utiliser onClick () ou onSelect () sur la balise d'option dans une page JSP? Comment faire une fonction qui calcule le factoriel pour les nombres avec des décimales? Méthode pour afficher le datapicker natif dans Chrome Suppression d'un article publié précédemment avec OpenGraph, ou vérifiez si ledit article a déjà été lu Savoir si la console est disponible MediaSource arrête de manière aléatoire la vidéo Comment passer à travers le code dans Google chrome javascript debugger Comment faire défiler les éléments de la page avec le clavier? Obtenez des barreaux obliques dans une chaîne – Javascript Comment faire pour que le Dropzone.js Previews Div soit cliqué et non le formulaire complet Quel est l'argument pour utiliser ES6 getters et setters sur getProperty / setProperty convention? Dans javascript, comment puis-je supprimer un élément d'un ensemble d'objets? Classer un tableau par "Levenshtein Distance" avec les meilleures performances en Javascript Pourquoi 00.0 provoque-t-il une erreur de syntaxe? Utilisation de la balise de commentaire HTML <! – -> toujours pertinente dans le code JavaScript?

Modifier le nombre de colonnes en fonction de la taille de l'écran

Je expérimente Bootstrap et je me demandais comment puis-je régler le nombre de colonnes en fonction de la taille de l'écran. J'ai vu cela à partir du tutoriel Bootstrap CSS: 

<!-- Stack the columns on mobile by making one full-width and the other half-width --> <div class="row"> <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> </div> <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop --> <div class="row"> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> </div> <!-- Columns are always 50% wide, on mobile and desktop --> <div class="row"> <div class="col-xs-6">.col-xs-6</div> <div class="col-xs-6">.col-xs-6</div> </div>

J'ai 6 colonnes sur la grande taille de l'écran et je voudrais passer à deux lignes de 3 colonnes sur les écrans moyens et à trois lignes de 2 colonnes sur les petits écrans. Il me semble que je ne peux que changer la largeur des colonnes et pas le nombre de colonnes. Puis-je le faire avec Bootstrap et sinon ce qui serait une bonne façon de le faire? Javascript?

Oui, vous pouvez modifier le nombre de colonnes avec Bootstrap. C'est pour cela que fait une grille flexible.

Voici un exemple qui suit vos instructions: 

 <div class="row"> <div class="col-xs-6 col-md-4 col-lg-2">first</div> <div class="col-xs-6 col-md-4 col-lg-2">second</div> <div class="col-xs-6 col-md-4 col-lg-2">third</div> <div class="col-xs-6 col-md-4 col-lg-2">fourth</div> <div class="col-xs-6 col-md-4 col-lg-2">fifth</div> <div class="col-xs-6 col-md-4 col-lg-2">sixth</div> </div>

Voir Bootply Demo . 

 <div class="row"> <div class="col-lg-2 col-md-4 col-xs-6"></div> <div class="col-lg-2 col-md-4 col-xs-6"></div> <div class="col-lg-2 col-md-4 hidden-sm hidden-xs"></div> <div class="col-lg-2 hidden-md hidden-sm hidden-xs"></div> <div class="col-lg-2 hidden-md hidden-sm hidden-xs"></div> <div class="col-lg-2 hidden-md hidden-sm hidden-xs"></div> </div> <div class="row"> <div class="hidden-lg col-md-4 col-xs-4"></div> <div class="hidden-lg col-md-4 col-xs-4"></div> <div class="hidden-lg col-md-4 hidden-sm hidden-xs"></div> </div> <div class="row"> <div class="hidden-lg hidden-md col-xs-4"></div> <div class="hidden-lg hidden-md col-xs-4"></div> </div> 
 <div class="row"> <div class="col-lg-6 visible-lg">Column 6 Large</div> <div class="col-md-3 visible-md">Column 1 Medium</div> <div class="col-md-3 visible-md">Column 2 Medium</div> <div class="col-xs-2 visible-xs">Column 1 Small</div> <div class="col-xs-2 visible-xs">Column 2 Small</div> <div class="col-xs-2 visible-xs">Column 3 Small</div> </row>

Il convient de noter que le contenu en double dans des colonnes séparées comme celle-ci n'est pas génial pour le référencement. Vous voudrez peut-être plutôt aborder cela en utilisant des colonnes imbriquées pour un contrôle plus granulé sur votre contenu sans devoir le doubler.