J'essaie d'afficher chaque image et sa description sur chaque moitié de l'écran de navigateur actuel. Voici mon HTML:
<div class="container">
<div class="row">
<div class="col-6">
<a href="#"><img src="images/img1.jpg" alt="" /></a>
</div>
<div class="col-6">
<p>Here is the description</p>
</div>
</div>
</div>
3 Réponses :
Vous utilisez bootstrap, alors utilisez simplement le cuit au four dans utilitaire réactif classes ;
Vous pouvez consulter plus d'informations ici: https://getbootstrap.com/docs/4.1 / Layout / la grille / col-6 diviser l'écran de chaque fenêtre. Vous devez utiliser col-sm , col-md , col-lg ou col-xl , en fonction duquel Taille de l'écran que vous souhaitez ajouter le point d'arrêt de la grille.
Juste une note pour les lecteurs, col-xs - * ne s'applique qu'aux versions bootstrap <4.x après cela est obsolète.
@Chrisw. Oui, mon erreur. col-xs est en effet obsolète, mais col-sm fonctionne toujours. Merci pour le rappel.
Merci Lucas, donc j'utilise col-6-md maintenant. Ce qui se passe, c'est que sur une fenêtre de bureau complète, il se divise toujours de la ligne 2. Ce que j'essaie d'atteindre, c'est que cela ne devrait se diviser que lors de la visualisation sur mobile et ne devrait pas se diviser lors de la visualisation sur le bureau. Comment puis-je le réparer?
@Kiddo est en fait col-md-6 , pas col-6-md ... Pourriez-vous essayer le bon, s'il vous plaît?
excuses ma typo, j'utilise
Si vous avez imputé correctement Bootstrap correctement, et si vous le regardez sur un périphérique de plus de 768 px largeur, il devrait fonctionner correctement. Et juste vérifier, vous avez supprimé le
Merci de votre réponse, j'utilisais une version plus ancienne de Bootstrap, le modifiant au plus tard le problème (je ne sais pas pourquoi). col-md-6 , toujours le divisé en 2 lors de la visualisation sur le bureau
col-6 , correct? Il suffit d'utiliser col-md-6 ...
Utilisez ces points d'arrêt pour les appareils mobiles @media (max-largeur: 600px) // pour les appareils mobiles @media (min-largeur: 600px) // pour écrans d'ordinateur portable
Utilisez la propriété de la grille Reportez-vous: Propriété de la grille