Bootstrap image 3 afficher

Question

Salut je question concernant le javascript et css, voici le lien avec l'image http://personal.crocodoc.com/YvRh8Hd

Ce que je veux faire est la position des cercles plus petits autour de gros. J'utilise bootstrap 3 et je veux garder la réactivité sur les cercles. Quelle serait la meilleure façon de faire le positionnement? La façon simple, je vais définir est dans les positions css

.one { 
    left: 260px; 
    top: -30px; 
} 

.two { 
    top: 50px; 
    left: 310px; 
} 

.three { 
    right: -100px; 
    top: 140px; 
} 

le problème est quand je remets à la côte navigateur plus petit (pour adapter à l'écran de la tablette ou téléphone), les cercles planent les uns des autres, ils doivent être positionnés verticalement en ligne. Merci pour vos réponses.

Answer 1

Pas une science exacte, mais vous pouvez utiliser les requêtes média css pour ajuster les différentes tailles d'écran afin de retravailler votre positionnement.

Quelque chose comme ceci:

@media (min-width: 600px) { 
    .one { 
    left: @left; 
    top: -@top; 
    } 
} 

@media (max-width: 599px) and (min-width: 300px) { 
    .one { 
    left: @left/2; 
    top: -@top/2; 
    } 
} 

Si vous recompiler MOINS de bootstrap, ils ont tailles d'écran prédéfinis: @ écran-xs, @ écran sm, @ écran, @screen md -lg

J'ai utilisé des variables pour vous suggérer la moitié des dimensions gauche/haut.

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries