bootstrap Problème d'affichage des colonnes responsives

Bibix

Membre
Salut,

Je suis en train de tester bootstrap sur mon localhost et j'ai un problème d'affichage. Je m'explique :
Je veux afficher 4 colonnes qui contiennent chacune d'entre elles du texte mais j'ai beau chercher je ne comprends pas pourquoi elles s'affichent une au dessus des autres alors qu'elles devraient s'afficher les unes à côté des autres, pourtant le code à l'air juste
HTML
<div class="container">
  <div class="row">
    <div class="col-xl-3">Lorem ipsum</div>
    <div class="col-xl-3">Lorem ipsum</div>
    <div class="col-xl-3">Lorem ipsum</div>
    <div class="col-xl-3">Lorem ipsum</div>
  </div>
</div>

J'ai l'impression que le fichier bootstrap.min.css n'est pas lu mais le chemin est bon car les boutons s'affichent bien par ailleurs...
:unsure:
 
Solution
Salut Bibix, tu utilise les classes col-xl-3 qui sont utilisées pour les écrans larges, au dessus de 1200px.

Je ne doute pas que l'écran de ton PC ait au moins cette résolution horizontale mais la fenêtre dans laquelle tu affiches ton front-end est-elle plein écran ?
Si ta fenêtre de navigateur est réduite par exemple à 1000px alors le responsive entre en jeu et empile les box.
Vérifie ce point, sinon il faudra chercher ailleurs...

Jack

Membre
Salut Bibix, tu utilise les classes col-xl-3 qui sont utilisées pour les écrans larges, au dessus de 1200px.

Je ne doute pas que l'écran de ton PC ait au moins cette résolution horizontale mais la fenêtre dans laquelle tu affiches ton front-end est-elle plein écran ?
Si ta fenêtre de navigateur est réduite par exemple à 1000px alors le responsive entre en jeu et empile les box.
Vérifie ce point, sinon il faudra chercher ailleurs...
 

Bibix

Membre
Aïe aïe aïe, l'erreur de débutant !!
Et oui c'était bien la fenêtre Live de VSCode que j'avais mis en demi-écran donc effectivement ça ne pouvait pas s'afficher normalement.
Donc j'ai pris l'habitude d'ouvrir la fenêtre Live en plein écran et de basculer avec des alt+tab

Merci Jack !
 

Ces discussions pourraient vous intéresser...

Bonsoir, j'ai fait une recherche sur le forum et je crois que personne n'en a encore parlé, j'ai trouvé un site pas mal lorsque j'ai installé easyPHP (qui est maintenant Webserver) : KodeShot. Cela permet de créer des captures d'écrans d'extrait de code. Vous tapez votre code, vous...
Hello, J'ai créé un formulaire avec Bootstrap mais j'ai un problème de mise en forme. Les <input> prennent chacun leur propre ligne alors que j'aimerais que certains soit côte à côte. Je ne parviens pas du tout à faire ce que je veux et je ne trouve rien dans la documentation...
Yo ! J'ai une div sans bordure remplie de cellules horizontales auxquelles j'applique une bordure sur le bord bas pour les séparer entre elles. Le problème c'est que la dernière je ne veux pas de bordure basse puisqu'il n'y a plus de cellule sous elle. Je n'ai pas la main sur le HTML...
Haut