Je crée une fonctionnalité pour mon site web responsive. Il se compose d'un carrousel d'images qui contient une légende. Sur le bureau, j'affiche la légende absolument. Le div, qui contient un en-tête et un paragraphe, est positionné au-dessus de l'image et occupe une largeur de 40%.Twitter Bootstrap sélecteurs CSS sensibles
Lorsque l'utilisateur utilise une tablette ou un téléphone portable, je souhaite afficher la légende relativement avec une largeur de 100%. Cela fait apparaître le texte sous l'image qui convient le mieux aux plus petites tailles d'écran.
Les deux façons de procéder seraient de dupliquer le code avec différentes classes css - un relatif avec la classe visible-desktop et l'autre div absolu avec la classe hidden-desktop. L'autre façon est d'utiliser javascript pour basculer une classe.
Je pensais, ce serait génial si je pouvais réaliser ce qui précède en utilisant purement css. Quelque chose comme .desktop .carousel-caption { Est-ce possible?
Vous pourriez peut-être utiliser des requêtes des médias et entrez votre code différent dans la requête des médias pertinents. Les requêtes média de Bootstrap sont détaillées ici: http://twitter.github.com/bootstrap/scaffolding.html#responsive –
Oh! Excellent!! Travaillé comme un charme! – Deco