Bootstrap - Modifier les lignes et les colonnes afin
En utilisant Bootstrap est-il possible d'avoir ces deux configurations différentes en fonction de la fenêtre d'affichage? J'ai été à la recherche à ce sujet et je suis conscient des concepts pousser, tirer et sensible utilitaires mais les exemples que j'ai trouvé a des structures plus simples.
Sur ce cas, je préfère ne pas utiliser les réactifs utilitaires (car il y aurait beaucoup de traitement répété) et/ou JavaScript, HTML et CSS de la manipulation.
Voici un violon avec la mauvaise mise en page sur les smartphones...
<div class="row">
<div class="col-sm-4 elA">Title A</div>
<div class="col-sm-4 elB">Title B</div>
<div class="col-sm-4 elC">Title C</div>
<div class="col-sm-4 elA">Graph A</div>
<div class="col-sm-4 elB">Graph B</div>
<div class="col-sm-4 elC">Graph C</div>
<div class="col-sm-12 elA">List A</div>
<div class="col-sm-12 elB">List B</div>
<div class="col-sm-12 elC">List C</div>
</div>
Les tablettes et les ordinateurs de bureau de mise en page
Smartphones disposition
- Si cela est encore possible, il est nouvelles pour moi.
- Eu un problème similaire. Ce que j'ai fait était chargement de la section deux fois et de cacher celle que je n'ai pas besoin. Cependant, dans mon cas, la section a été très court et ne contenait que du texte. Donc je ne sais pas, si c'est quelque chose que vous aimeriez faire.
- Sur mon cas, je préfère ne pas utiliser cette approche car sur le meilleur scénario, je dois rendre des six grandes listes au lieu de trois.
- Je pense que l'approche que je voudrais utiliser est de vérifier l'agent de l'utilisateur sur le serveur, et d'appliquer une feuille de style supplémentaire pour les navigateurs mobiles.
- j'ai une solution, mais seulement si la liste que la même disposition que l'autre élément (trois dans une rangée) jsfiddle.net/mehfb6p0/1
- avec un peu d'astuce, on peut faire ce que vous voulez mais je ne suis pas sur qu'il fonctionnera pour 6 élément : jsfiddle.net/mehfb6p0/3
- ekans qui est une bonne solution! Il fonctionne très bien, mais je vais faire des tests un peu plus. Merci! J'aimerais voir plus de solutions pour cela 🙂
- De vérifier ma solution je pari est mieux que @ekans
Vous devez vous connecter pour publier un commentaire.
J'ai trouvé cette question aujourd'hui et je ne voyais pas cette réponse qui satisfera les OP et les futurs visiteurs de ce post. Ainsi, a décidé de répondre avec bootstrap 4 version:
Voici la démo pour bootstrap 4 de ligne et de colonne de la commande. Je l'espère, vous serez capable de gérer la colonne de commande dans le bootstrap 3 ainsi, si vous travaillez sur elle.
Il y a 2 solutions, sans l'aide de Javascript
Première Option:
L'élément de la liste est en Responsive Utilitaires Classes
http://getbootstrap.com/css/#responsive-utilities
Vérifier cet exemple:
http://jsfiddle.net/ppollono/mehfb6p0/12/
Pour la liste de la première ligne
Pour la liste au bas
CONTS: élément de la liste est dupliqué
Deuxième Option:
Utiliser Flex affichage
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
Vérifier cet exemple:
http://codepen.io/Palapas/pen/LVvbyW?editors=110
CSS:
HTML:
CONTS: non pris en charge par IE9 et ci-dessous http://caniuse.com/#feat=flexbox
Probablement peu en retard à la fête, mais vous pouvez facilement corriger cela avec quelques lignes de css et flexbox. Je ne sais pas si bootstrap offre quelque chose de similaire.
Exemple: https://jsfiddle.net/t284d3mg/
Flexbox est parfaitement expliqué au MDN: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
Être conscient que plus le navigateur ne prennent pas en charge flexbox, de disposer d'un vieux spécification de mise en œuvre ou que vous avez besoin d'ajouter des préfixes.
Est-ce ce que vous recherchez?
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
- Je utiliser les media queries tout le temps pour ce genre de choses.
Je peux l'utiliser de deux façons.
tout d'abord, définir la feuille de style:
Deuxième, définition des supports de requête dans la feuille de style:
Espère que je n'ai pas mal compris votre question 😀