changement de Bootstrap DIV commande en fonction de la taille de l'écran
Scénario: j'ai un éditeur de widget (pensez textarea) pour un restituable modèle, un panneau d'aperçu pour le modèle modifié, et une liste de messages d'erreur générés lors du rendu de l'aperçu. Mon but la mise en page est comme ceci:
small screen: large screen:
+--------------+ +--------------+ +--------------+
| | | | | |
| editor | | editor | | preview |
| | | | | |
+--------------+ +--------------+ +--------------+
| | +-------------------------------+
| errors | | |
| | | errors |
+--------------+ | |
| | +-------------------------------+
| preview |
| |
+--------------+
J'ai seulement besoin de ces deux mises en page (et non pas trois ou quatre), seuls les lg est assez grand pour avoir un sens pour l'éditeur et l'aperçu à côté de l'autre. Pour contrôler la taille, j'ai ajouté col-xs-12 à tous les trois DIVs et le col-lg-6 de l'éditeur et de l'aperçu (la liste d'erreurs devrait rester au 12 sur de grands écrans).
D'autres posts sur le sujet ont suggéré que la "plus petite" mise en page dicte l'ordre des DIVs dans le code HTML, donc, ce serait: l'éditeur, d'erreurs, de les prévisualiser. De plus, ils disent de changer l'ordre sur les grands écrans avec -pull - push - classes. J'ai essayé de faire cela en ajoutant des col-lg-pull-6 à l'aperçu et le col-lg-push-6 pour les erreurs. Comme je le comprends, push/pull de travail par rapport à la position actuelle de l'élément, de sorte que devrait avoir tiré de l'aperçu de l'arrière dans la première ligne, et a poussé les erreurs de la boîte dans la deuxième rangée.
Noter que je n'ai pas utilisé la "ligne" des classes que je ne comprends pas tout comment à les utiliser; le placement des éléments dans les lignes dépendent de la taille de l'écran, n'est pas fixée par le HTML (c'est le point de l'ensemble d'un réactif de mise en page, n'est-ce pas?)
D'autres postes ont également suggéré de rendre l'une des cases deux fois, d'en faire invisible en fonction de la taille de l'écran, mais il leur manque l'explication approfondie pourquoi c'est une bonne idée. C'est purement un problème de mise en page, et de nouveau le point de l'ensemble d'un réactif de mise en page est donc je n'ai pas à gâcher le code HTML de s'adapter à des tailles d'écran.
Flex
Méthode et ses beaucoup plus facile d'obtenir une volonté de mise en page. La principale caractéristique de Flex
est, à tout moment, vous pouvez modifier l'ordre d'affichage des divs.Sauf si vous utilisez Flexbox, il n'y a pas de CSS solution. La poussée, la traction, et les décalages qui viennent avec Bootstrap travail horizontalement en fonction de positionnement relatif plus ou moins à gauche ou à droite. Vous pouvez dupliquer et ajouter avec jQuery ou utiliser côté serveur pour servir des différents html pour toucher des appareils qui répondent à vos exigences de largeur ou vous pouvez masquer et afficher avec le réactif utilitaires
Responsive design est de présenter, de ne pas s'adapter, le html comme il est, mais ajusté via css pour accueillir le port de la vue. Conception adaptative, en utilisant les outils côté serveur, peuvent servir des différents html basé sur l'appareil. Sans Flex, vous pouvez utiliser les css pour masquer et afficher et/ou jQuery pour le clone et l'ajouter. Si vous connaissez la largeur et la hauteur de l'éditeur et de l'aperçu, vous pouvez utiliser le positionnement absolu pour la faire ressembler il est en-dessous et à l'utilisation remplissage en bas sur le conteneur pour le garder ouvert. Vous pouvez utiliser jQuery pour écrire la hauteur et le positionnement de la charge et la redimensionner. caniuse.com/#search=flex
pouvez-vous veuillez reproduire le problème dans un violon pour nous aider à comprendre la structure?
êtes-vous d'accord avec jquery solution? il semble qu'il n'y est pas de css solution.
OriginalL'auteur Martin Geisse | 2014-08-16
Vous devez vous connecter pour publier un commentaire.
Dans votre question, vous mentionnez à l'aide de lignes. Le
.row
efface la colonne de chars et ajuste les marges gauche et droite des colonnes de sorte qu'il n'y a pas de rembourrage supplémentaire sur l'extérieur, pas à l'aide de la.row
gâchera votre disposition. Voici un guide complet pour le Bootstrap grille: http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-grid-works.À l'aide de Flexbox est la seule façon de le faire dans le plus pur css. À l'adresse des navigateurs plus anciens (notamment inférieure ou égale à ie9), j'utilise Modernizr (le seul dans ce lien de démonstration ajoute
.flexbox
ou.no-flexbox
sur l'élément html, c'est juste pour cette démo. De cette façon, vous pouvez isoler votre utilisation du modèle flex sur les navigateurs qui le supportent et de secours sera la norme bootstrap colonnes que vous définissez dans votre code html. N'oubliez pas de suivre la grille des instructions sur la GetBootstrap.com. Vous aurez besoin de faire vos propre compilation de Modernizr.Pour obtenir de Bootstrap.css pour travailler sur IE8, vous devez utiliser Respond.js -- voir leurs docs et lien le CSS localement avec chemin d'accès relatif. Utiliser jQuery série 1, supérieure à 1.10 si 1.9 œuvres. jQuery 2 n'est pas pris en charge dans les anciens navigateurs IE 8.
DÉMO: http://jsbin.com/dimuq/1
PETITE VUE PORT:
VUE LARGE DE PORT:
CSS:
En savoir plus sur Flexbox ici: http://css-tricks.com/snippets/css/a-guide-to-flexbox/
et http://philipwalton.github.io/solved-by-flexbox/
HTML -- nécessite Modernizr pour vérifier flexbox et ajouter une classe flexbox pour le html (voir démo js panneau)
Fonctionne comme prévu et "se sent bien" trop, voici donc votre générosité. Pour ceux qui essaient de la démo: Vous devrez ajuster la largeur ou de la marge pour s'adapter à l'éditeur et aperçu dans une seule ligne. Prise en charge du navigateur peut être un problème pour moi, et je me demande si je peux vraiment utiliser flexbox dans la production, mais alors prise en charge du navigateur n'était pas une partie de la question.
OriginalL'auteur Christina
Essayez ceci:
OriginalL'auteur Suganth G
Je vous recommandons de vérifier cette pour vous aider sur ce point.
De travail avec Bootstrap sur une base quotidienne et, pour moi, c'est bien. Pour faire quelque chose de plus "radicale" pourrait vous mettre dans une position où vous devez re-construction de la base de code CSS pour l'adapter à vos besoins.
Une autre solution serait d'utiliser jQuery pour ajouter ou ajouter ces divs en les tournant pour mobile. J'espère que certains de cela vous aide!
OriginalL'auteur ProDexorite
Je suis venu avec un plaisir la solution pour vous: BOOTPLY. Cela inclut l'aide de la
pull-right
classe pour déplacer l'aperçu de la colonne sur une grande fenêtre d'affichage, puis, changeantmarginTop
(pour déplacer le div en haut) la hauteur combinée de l'autre 2 divs. cette terre à l'endroit précis que vous souhaitez.HTML:
Jquery:
Grande fenêtre d'affichage:
Maintenant, le problème avec cette solution c'est maintenant que lorsque vous vous déplacez vers la petite fenêtre d'affichage,
preview
chevaucheeditor
, donc si vous utilisez la même hauteur variable et de faire le mouvement inverse (marginTop: "+=" +h
) sur la petite fenêtre d'affichage, il va être mis en place.Le principal avantage de cette solution est d'éviter la pluralité de la exactement la même divs
Voulez-vous la duplication des divs ou voulez-vous un div avec jQuery manipuler la position de la div. Il est question de préférence personnelle.
il existe des arguments de chaque côté de jQuery et CSS la résolution de ce problème. Si votre dupliqué divs est trop complexe et vous devez changer quelque chose, vous avez à changer deux fois.
Smartt ni fait sens pour moi, par rapport à la passation de la DIV dans le CSS.
oui, c'est exactement pourquoi j'essaie d'éviter de dupliquer les DIVs et pourquoi je suis objectif de faire de la DIV en CSS. À propos de jQuery vs CSS: je pense que l'un est mieux que de dupliquer les DIVs. Si le CSS solution est basée sur flexbox, comme suggéré ci-dessus, le principal argument pro jQuery est la compatibilité du navigateur.
OriginalL'auteur Jordan.J.D
Si vous pouvez régler l'éditeur et l'aperçu à une hauteur fixe dans la vue du bureau, il est assez facile de le faire:
HTML
CSS
Démo
http://www.bootply.com/4jpGHUJWzp
OriginalL'auteur Khan