J'essaye simplement de centrer la justification et d'aligner deux colonnes bootstrap à l'intérieur d'un conteneur. Les colonnes sont dans des lignes différentes.
La disposition de la grille est
<body style="height: 100vh;">
<div class="container h-100">
<div class="row h-100 justify-content-center align-items-center">
<div class="col-6">
<div class="card">
hello
</div>
</div>
</div>
<div class="row h-100 justify-content-center">
<div class="col-4">
<div class="card">
world
</div>
</div>
</div>
</div>
</body>
les cartes sont juste pour décrire les conteneurs.
Je suis au courant là-bas Il y a BEAUCOUP de questions sur l'alignement vertical, et j'ai peut-être manqué celle qui contient la réponse dont j'ai besoin. Mais ce que je retiens de la plupart d'entre eux, c'est que le parent doit avoir une certaine hauteur.
Ce qui suit fonctionne très bien si vous n'avez qu'une seule ligne, car vous pouvez centrer la colonne dans la ligne 100% de hauteur. Mais si vous avez deux lignes, ce n'est pas très bien, puisque chaque colonne est centrée sur sa propre ligne, et les lignes ont chacune la hauteur de la fenêtre.
<body style="height: 100vh;">
<div class="container">
<div class="row">
<div class="col-6">
<div class="card">
hello
</div>
</div>
</div>
<div class="row">
<div class="col-4">
<div class="card">
world
</div>
</div>
</div>
</div>
</body>
J'aimerais pouvoir simplement déplacer le justify-content-center align-items-center vers le conteneur, mais hélas, cela ne semble rien faire.
Alors, s'il vous plaît aidez-moi, comment puis-je placer ces couleurs, l'une sur l'autre, au milieu de l'écran?
3 Réponses :
Donne toujours la hauteur à travers la hauteur de élément intérieur , si je donne la hauteur sur l'élément de classe container , cela ne fonctionnera pas , alors laissez le conteneur dépendre de la hauteur de élément intérieur , alors essayez comme ceci.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/> <div class="container mt-3"> <div class="col-12" style="min-height: 180px;"> <div class="row bg-success position-absolute w-100 h-100 d-flex flex-row justify-content-center align-items-center"> <div class="col-6 pr-2"> <div class="card text-center"> hello </div> </div> <div class="col-6 pl-2"> <div class="card text-center"> world </div> </div> </div> </div> </div>
J'espère que vous comprendrez ce petit désordre et que cela vous aidera.
Cela place deux colonnes côte à côte dans la même ligne. Je n'ai aucun problème à faire ça. Ce que je recherche, c'est l'un sur l'autre, idéalement dans des rangées différentes.
C'est tout simplement simple, mais vous n'avez pas mentionné plus tôt ce scénario
J'ai explicitement spécifié l'un sur l'autre et dans différentes lignes plusieurs fois dans mon article ainsi que dans le titre. Mais si vous pensez que je peux rendre la question plus claire, faites-le moi savoir et je la mettrai à jour.
Cher kag0, vous n'avez pas mentionné le comportement du point d'arrêt ci-dessus, et vous atteignez votre message 4 jours après pour prendre une mise à jour, effectuez globalement ce changement ci-dessus la carte div 'col-12 col-md-6 pr-2 px- md-3 'et même pour la ligne de classe pl-2 aussi .... j'espère que cela vous aidera.
Voici un bon moyen de faire cela en utilisant la construction de Bootstrap dans les flexbox.
<div class="container d-flex h-100 flex-column">
<div class="flex-grow-1"></div>
<div class="row justify-content-center">
<div class="col-3">
<div class="card">ITEM A</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-3">
<div class="card">ITEM B</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-3">
<div class="card">ITEM C</div>
</div>
</div>
<div class="flex-grow-1"></div>
</div>
Nous avons deux lignes de tampon flex, avec flex-grow-1. Chacune de ces lignes se développera (avec le même poids) pour remplir les parties supérieure et inférieure de manière égale. Chacune des lignes de contenu au milieu aura la hauteur de leur contenu.
Le résultat final est les cartes ITEM centrées verticalement et horizontalement sur l'écran. Comme elles se trouvent dans des lignes individuelles, vous pouvez ajuster les marges / remplissage si nécessaire (par défaut, les cartes se terminent l'une à côté de l'autre verticalement.
Exemple de capture d'écran du code ci-dessus dans bootstrap
Vous pourriez potentiellement faire celui-ci avec une ligne + colonne et une flexbox interne, mais cela donne vous avez moins de contrôle sur la façon dont les cartes individuelles apparaissent les unes par rapport aux autres.
EDIT: d-flex fait du conteneur un conteneur flexible autour de ses lignes enfants, et flex-column rend les enfants plutôt rendus et étirés verticalement que horizontalement.
La solution la plus simple est de rendre les lignes à 50% de hauteur à la place ...
<div class="container d-flex flex-column min-vh-100">
<div class="row flex-grow-1 justify-content-center align-items-center">
<div class="col-6">
<div class="card">
hello
</div>
</div>
</div>
<div class="row flex-grow-1 justify-content-center align-items-center">
<div class="col-4">
<div class="card">
world
</div>
</div>
</div>
</div>
Démo: https://www.codeply.com/go/7POJtgNaQI
Ou, le flexbox consisterait à utiliser la classe Bootstrap flex-grow-1. De plus, vous n'avez pas besoin de la hauteur du corps. Utilisez simplement min-vh-100 sur le conteneur ...
<body style="height: 100vh;">
<div class="container h-100">
<div class="row h-100 justify-content-center align-items-center">
<div class="col-6">
<div class="card">
hello
</div>
</div>
</div>
<div class="row h-100 justify-content-center align-items-center">
<div class="col-4">
<div class="card">
world
</div>
</div>
</div>
</div>
</body>
Donnez toujours la hauteur à travers l '
élément intérieur