Conception de Bootsrap adaptative: priorité des Divs empilées?

J'essaie le Bootstrap CSS-Framework et j'ai une question.Conception de Bootsrap adaptative: priorité des Divs empilées?

Voici le Fiddle: http://jsfiddle.net/hzAUz/

Disons que j'ai une div, avec 3 divs égaux à l'intérieur de celui-ci:

<div id="main" class="row"> 
<div id="columnleft" class="span4">LEFT</div> 
<div id="MainContent" class="span4">Content</div> 
<div id="columnrigh" class="span4">Right</div> 
</div>

Alors qu'est-ce qui se passe, lorsque vous utilisez Bootstrap, est qu'aussitôt les fenêtres deviennent plus petits, les Divs sont empilés dans cette priorité: 1. gauche 2. contenu 3. droit

Mais il est logique, de mettre le contenu en premier.

Est-ce que quelqu'un sait comment insérer des priorités lors de l'utilisation du bootstrap-responsive.css?

Merci beaucoup d'avance.

KG, George

Source

2013-09-23 LoveAndHappiness

Il y a quelques façons dont vous pouvez le faire. Un serait: Commencez à la taille mobile, et de concevoir "mobile d'abord". Cela faciliterait la tâche de votre petit écran, et vous pourriez alors ajouter des classes supplémentaires à ces conteneurs pour accommoder les plus grandes tailles d'écran.

Autre option: Planifiez pour mobile et découvrez si vous ne pouvez pas masquer/convertir vos éléments dans des tailles d'écran plus petites pour quelque chose de plus mobile. c'est-à-dire ... votre pile gauche de liens de nav devient un menu de sélection dans le mobile; ainsi, ne prenant qu'une seule ligne de l'immobilier.

Ma préférence est d'utiliser javascript et de convertir la navigation vers la gauche et vers le haut en un élément show/hide (bouton) de taille mobile. De cette façon, j'ai juste un logo et un bouton dans le haut de mon interface, et le contenu suivant immédiatement.

Source

2013-09-23 16:45:30 Dawson

Haha ... oui ... tu m'as donné une excellente idée. Je pourrais juste utiliser la classe "visible: desktop" et à chaque fois que la fenêtre s'agrandit, la colonne de gauche disparaît et le contenu est affiché en premier ... Je ne suis pas sûr si vous vouliez dire ceci ... – LoveAndHappiness

Mais pas d'affichage: aucun ... Chaque bit de contenu/fonctionnalité est disponible, indépendamment de la taille de l'écran. Ce que je voulais dire était: Dans le mobile, je ne montre pas le contenu de gauche de la même manière que le contenu principal; Cependant, j'ai tendance à concevoir à partir de mobiles. Pas mobile après coup. S'il s'agit d'une navigation à gauche ... elle peut être affichée comme une liste déroulante (ou une interface bouton/js), et non comme une UL. Si c'est du contenu sur la gauche, je les empilerais Main, Left, Right ... et utiliserais le CSS en tablette/desktop pour le faire L/M/R – Dawson

Je ne crois pas qu'il existe un moyen dans Bootstrap 2, mais si vous deviez passer à Bootstrap 3, vous pouvez contrôler l'ordre des colonnes. Voir http://getbootstrap.com/css/#grid-column-ordering pour plus de détails.

Source

2013-09-23 16:48:23

On dirait que tu as raison. Googled pour la commande de colonne et trouvé cet article, qui explique ce que vous avez dit plus en détail: [Link] (http://mattduchek.com/differences-between-bootstrap-v2-3-and-v3-0/) Merci beaucoup. Vous avez une idée, quand bootstrap 3 va sortir? (Je sais que le RC est déjà disponible, je veux dire la version stable) – LoveAndHappiness

Final (3.0.0) est sorti le mois dernier un certain temps. Ils travaillent déjà vers 3.0.1, donc vous devriez être sûr de l'utiliser si vous voulez monter. –

mise à niveau pour l'amorçage 3 Définitivement si vous le pouvez, comme @Sean suggéré, mais si vous ne pouvez pas en ce moment, certaines de ces réponses peuvent vous aider:

In Twitter Bootstrap 2, how can I get right columns to move to the top when shrinking the screen?

Source

2013-09-23 16:56:45

Conception de Bootsrap adaptative: priorité des Divs empilées?

Répondre

Questions connexes