J'ai besoin de 5 colonnes dans la grille de rangée bootstrap 4. Comment puis-je le faire?
Maintenant, je fais: et quand je redimensionne le document, mes blocs ne va pas en bas. Pourquoi? Comment je peux le faire?
4 Réponses :
Après avoir consulté le BS4 Docs sur le système de grille , vous Doit s'assurer que vous avez le conteneur code>, ligne code>, puis col-sm | col-md | ... code>. Par exemple: <div class="container">
<div class="row">
<div class="col-sm col1"></div>
<div class="col-sm col2"></div>
<div class="col-sm col3"></div>
<div class="col-sm col4"></div>
<div class="col-sm col5"></div>
</div>
</div>
col est une classe valide cependant, elle ajustée à l'espace disponible de la ligne
Nan. Voir s'il vous plaît sur Redimensionner cette page: Stackoverflow.com/tags?page=2&tab=popular lors du redimensionnement des éléments Aller en bas avec 1.
@MAFYSGRIF est que la page relave, car je ne suis pas sûr que cela utilise la BS, ou du moins sur cette page ... @ Ivans95, toute ma réponse aborde également un autre point, c'est-à-dire l'utilisation de Conteneur (l'adjoint peut déjà le faire, mais c'est le seul autre problème possible, si l'on ne considère pas les itinéraires problématiques obscur tels que les conflits / remplaçants de la classe CSS parasites, etc.
@samhuk je viens de mentionner la classe col car vous les avez changées sur col-sm , je voulais juste garder clairement que juste col est aussi un classe valide
Gardez à l'esprit que lorsque vous utilisez la classe code> Col CODE> sans nombre ni point d'arrêt, vous indiquez simplement que l'élément est une colonne et d'utiliser tout l'espace disponible dans la ligne; Donc, si vous mettez plusieurs classes code> Col code> L'espace est distribué de manière égale pour toutes, en raison de cette ligne ne pas envelopper les éliciements, lorsque vous rezisez l'écran, la ligne s'y ajuste simplement. comme les éléments à l'intérieur.
Pour que les éléments enveloppent, vous devez être spécifique de la taille de chaque colonne, alors lorsque cette taille ne correspond pas à la rangée; Ensuite, il va envelopper dans une nouvelle ligne, que les classes Vous devez lire comment le système de grille de bootstrap fonctionne ici: https://getbootstrap.com/docs/4.3/layout/grid/ p> p> col - * - * CODE> sont. p>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col col1"></div>
<div class="col col2"></div>
<div class="col col3"></div>
<div class="col col4"></div>
<div class="col col5"></div>
</div>
<div class="row">
<div class="col-6 col-md-2 col1"></div>
<div class="col-6 col-md-2 col2"></div>
<div class="col-6 col-md-2 col3"></div>
<div class="col-6 col-md-2 col4"></div>
<div class="col-6 col-md-2 col5"></div>
</div>
Voir s'il vous plaît cette page: Stackoverflow.com/tags?page=2&tab=popular J'ai besoin de grille comment sur cette page avec Mots clés
@MAFYS Les Documents de bootstrap ont toutes les informations disponibles pour reproduire cette mise en page, les lire ... Dans ma réponse, je vous explique que si vous voulez que les colonnes redimensionnent et enveloppent en fonction de la largeur de l'écran, vous devez utiliser des classes d'arrêt comme col-sm-4, voire col-auto
Avec col-auto col-md-2 col1 Je ne reçois pas 100% avec la mise en page. J'ai une place à droite.
@MAFYSGRIF Pourquoi l'utiliseriez-vous comme ça? Je pense que ce n'est pas clair ce que vous demandez, votre question initiale était d'une rangée de 5 colonnes qui n'enveloppait pas, c'est ce que la plupart des gens répondent ... Si vous n'avez pas lu comment Bootstrap fonctionne difficile de vous aider; J'ai expliqué comment les rangées et les colonnes fonctionnent et ont fourni un lien pour une nouvelle documentation; Soit essayer de les lire en premier, car ce dont vous avez besoin est expliqué là-bas ou reformulez votre question ... Néanmoins, si vous faites quelque chose comme la page Tags de So, c'est divisé en 4 colonnes, pas 5
@MAFYSGRIZ Gardez également à l'esprit que la page de Stackoverflow utilise la grille CSS, pas de bootstrap, qui est faite sur Flexbox
essayez de spécifier les tailles (12 max).
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row justify-content-center">
<div class="col-md col-sm-12">col-1</div>
<div class="col-md col-sm-12">col-2</div>
<div class="col-md col-sm-12">col-3</div>
<div class="col-md col-sm-12">col-4</div>
<div class="col-md col-sm-12">col-5</div>
</div>
</div>
Est-ce que cela répond à votre question? Bootstrap - 5 mises en page de colonne