Discussion :

[Paul75]

Bonjour,
J'utilise bootstrap 4.3.1.
Je voudrais 2 colonnes donc jai fait :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<div class="row">
  <div class="col-3">PANNEAU DE GAUCHE</div>
  <div class="col">PANNEAU DE DROITE</div>
</div>

Tous vas bien comme cela m'affiche correctement mais si je met dans la droite un tableau avec une 50 ene de colonne alors la cela déborde cela agrandit la page come s'il crois que la taille est pas fixed ...

Comment faire ?


Merci

[abdennour bouaicha]

salut,
tu dois appliquer le bootstrap même sur le tableaux pour fixer sa largeur par rapport aux autre divs qui sont à coté:

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<div class="row">
  <div class="col-xs-3">PANNEAU DE GAUCHE</div>
<table class="col-xs-8">....</table>
  <div class="col-xs-1">PANNEAU DE DROITE</div>
</div>

et sans oublier :la somme des cols doit être 12, c.a.d si tu as donné à la div gauche : 3, et la div droite : 1 alors le tableau doit avoir: 8 ,
12= 3+8+1.

[darkstar123456]

Bonjour,

Désolé @abdennour bouaicha mais écrire cela est une très mauvaise pratique.
Pour éviter tout problème, je te conseille que tes colonnes servent uniquement à définir des colonnes.
Elles ne doivent pas se trouver dans un élément comme <table>

Pour ce qui est de ton problème, c'est qu'il faut comprendre le système de grille de Bootstrap.
Ce système est basé sur 12 colonnes. Il faut donc que ton résultat total de colonne arrive à 12.
Exemple pour ta classe col-3 ça veut dire qu'il te faut un col-9 pour terminer ta ligne (12 - 3 = 9)

CEPENDANT, il existe 2 classes "spéciales" dans Bootstrap :

1. .col
2. .col-auto

La première va prendre automatiquement UN MAX de place pour terminer la ligne (et aller à la ligne si le contenu devient trop large)
La seconde, à l'inverse, aura la largeur du contenu.

Dans ton cas, je t'invite à mettre un background-color sur ta colonne et tu verras que la colonne passe de "je prends le reste de la ligne" à "je vais directement à la ligne" car le contenu devient trop important en terme de largeur.
Si tu souhaites restreindre absolument la colonne à la ligne, il suffit de respecter la règle décrite plus haut : arriver à un total de maximum 12 (t'es pas obligé d'aller jusqu'à 12 si tu souhaites avoir de l'espace horizontal par exemple, of course :-))


Toutes ces infos se trouvent dans la documentation de Bootstrap : https://getbootstrap.com/docs/4.3/layout/grid/