Comment organiser des listes de bootstrap horizontalement?

Comment organiser la liste des bootstrap horizontalement? Placez l'élément de liste dans une ligne avec la classe Row. Utilisez la classe COL pour contrôler la largeur de l'élément de liste, telles que Col-MD-4 pour représenter 4 colonnes sous la taille d'un écran moyen. Les marges intérieures et extérieures peuvent être ajustées à l'aide de P-2 et MX-2. Utilisez D-Flex Flex-Wrap pour activer Flexbox sur la ligne pour l'enveloppement automatique des lignes. Utilisez Col-MD-Auto pour faire en sorte que les éléments de liste occupent automatiquement la largeur requise.

Arrangement horizontal de liste de bootstrap? Cette question est géniale! De nombreux novices seront coincés ici, mais ce n'est pas si compliqué. La clé est de comprendre le système de grille de bootstrap et quelques conseils. Dans cet article, je vous emmènerai des bases à avancé, triant complètement la disposition horizontale de la liste de bootstrap et partagent quelques pièges et des secrets uniques sur lesquels j'ai marché au fil des ans.

Parlons d'abord des bases. Vous devez comprendre comment Bootstrap est présenté à l'aide d'un système de grille. Il utilise des classes row et col pour contrôler la disposition des éléments. row représente une ligne, et col- sont suivis d'un nombre, indiquant le nombre de colonnes que l'élément occupe. Par exemple, col-md-4 signifie occupe 4 colonnes sous la taille d'un écran moyen, avec un total de 12 colonnes. Si vous ne comprenez pas ce système de grille, ceux derrière seront inutiles.

Maintenant, allons directement au sujet: comment organiser la liste horizontalement? La méthode la plus simple et la plus brute consiste à mettre l'élément de liste li dans row , puis à utiliser col pour contrôler la largeur de chaque li . Comme ça:

 <code class="html"><div class="row"> <div class="col-md-4"> <li>Item 1</li> </div> <div class="col-md-4"> <li>Item 2</li> </div> <div class="col-md-4"> <li>Item 3</li> </div> </div></code>

L'avez-vous vu? col-md-4 permet à chaque élément de liste d'occuper 4 colonnes, et trois articles occupent une seule ligne, disposés parfaitement horizontalement! Bien sûr, vous pouvez également utiliser col-sm- , col-lg- , etc. pour contrôler la disposition de différentes tailles d'écran, selon vos besoins de conception.

Mais attendez! Ce n'est que l'utilisation la plus élémentaire. Dans l'application réelle, vous pouvez rencontrer des situations plus complexes. Par exemple, la largeur de l'élément de liste n'est pas fixe, ou vous souhaitez avoir un espacement entre les éléments de la liste.

Pour le moment, vous devez utiliser d'autres classes fournies par Bootstrap. p-2 peut ajouter des marges intérieures, mx-2 peut ajouter des marges horizontales. Vous pouvez ajuster ces valeurs au besoin.

En allant plus loin, que se passe-t-il si vous voulez que les éléments de la liste s'enveloppe automatiquement, gardez-les horizontalement, mais les enveloppez automatiquement à la ligne suivante lorsqu'ils dépassent la largeur de l'écran? Cela nécessite Flexbox. L'ajout d-flex flex-wrap à row peut réaliser cet effet.

 <code class="html"><div class="row d-flex flex-wrap"> <div class="col-md-auto p-2"> <li>Item 1</li> </div> <div class="col-md-auto p-2"> <li>Item 2</li> </div> <div class="col-md-auto p-2"> <li>Item 3</li> </div> <div class="col-md-auto p-2"> <li>Item 4</li> </div> <!-- 可以添加更多列表项--> </div></code>

Ici, col-md-auto permet à chaque élément de liste d'occuper automatiquement la largeur requise, tandis que flex-wrap permet d'envelopper la ligne. N'oubliez pas que p-2 vous aidera à contrôler facilement l'espacement et à éviter la liste des éléments de listing ensemble.

Enfin, une certaine expérience: ne comptez pas trop sur le style de bootstrap par défaut, apprenez à vous ajuster en fonction de vos besoins. Essayez différentes combinaisons de classes et d'attributs pour trouver la meilleure solution pour votre projet. N'ayez pas peur d'essayer, modifiez hardiment le code et apprenez des erreurs, afin que vous puissiez devenir un véritable maître de bootstrap! N'oubliez pas que la pratique apporte une véritable connaissance!

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!