Comment personnaliser les largeurs de colonnes dans Bootstrap 4 ?

Dimensionnement des colonnes dans Bootstrap 4

La possibilité de personnaliser la largeur des colonnes dans Bootstrap 3 à l'aide de col-sm-xx a été interrompue dans Bootstrap 4. Ce changement peut être dû à l'implémentation de flexbox dans Bootstrap 4, qui propose une approche différente de la mise en page. Pour réaliser le redimensionnement des colonnes dans Bootstrap 4, vous pouvez explorer des solutions alternatives.

Assurer la présence de la classe de table

Tout d'abord, vérifiez que votre table contient la "table" classe. Les tables Bootstrap 4 sont facultatives, vous obligeant à ajouter explicitement cette classe. Ceci est essentiel pour un formatage et une taille de colonne appropriés.

Modifications Flexbox et CSS

Dans Bootstrap 3, CSS a été utilisé pour empêcher les cellules du tableau de flotter et garantir qu'elles se comportent correctement. . Cependant, ce CSS n'est pas inclus dans Bootstrap 4 alpha. L'ajout manuel de ce CSS peut aider à garantir que les colonnes respectent les largeurs spécifiées dans l'en-tête du tableau (thead).

d-inline-block for Table Cells

Une autre approche consiste à appliquer la classe "d-inline-block" aux cellules du tableau (td). Cela neutralise le comportement "display:flex" par défaut des colonnes, leur permettant de prendre les largeurs appropriées.

Classes d'utilitaires de dimensionnement

Bootstrap 4 fournit des classes d'utilitaires de dimensionnement telles que " w-25" et "w-50" pour définir des largeurs spécifiques sur les colonnes. Ces classes offrent une méthode simplifiée et réactive de dimensionnement des colonnes.

Classes Flexbox et col-* Grid

Vous pouvez également exploiter la classe d-flex sur les lignes du tableau ( tr) et les classes de grille col-* sur les colonnes (th,td). Cette approche permet des largeurs de colonnes flexibles et réactives.

Remarque : L'utilisation de display:flex sur les lignes du tableau peut avoir un impact sur les bordures du tableau, nécessitant un ajustement supplémentaire.

En résumé, la colonne le dimensionnement dans Bootstrap 4 a changé en raison de la transition vers flexbox. Des solutions alternatives sont disponibles, telles que garantir la présence de la classe table, modifier le CSS, utiliser d-inline-block pour les cellules du tableau, dimensionner les classes utilitaires et flexbox avec les classes de grille col-* sur les lignes et les colonnes.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!