bootstrap 4 alignement vertical

-1

Ce que j'essaye d'accomplir est ceci: 1 longue colonne de gauche - et à côté de lui, 2 rangées sur la droite, qui ensemble - s'alignent vers la colonne de gauche. Dans une table il super facile à faire:bootstrap 4 alignement vertical

---------------------------- 
|   |    | 
| col-4 |  col-8  | 
|   |    | 
|   |________________| 
|   |    | 
|   |    | 
|   |  col-8  | 
|   |    | 
----------------------------

Mon code ressemble à ceci, mais il est là seulement à mi-chemin: je ne peux pas obtenir la deuxième rangée col-8 de se déplacer jusqu'à son jumeau (autre que une sorte de double fait sur commande row avec un négatif margin-top).

<div class="row d-flex flex-row-reverse"> 
    <div class="col-sm-8 align-self-start">888</div> 
    <div class="col-sm-4" style="height: 400px;">444</div> 
    <div class="col-sm-8 ">888</div> 
</div>

JSFIDDLE

Merci.

Source

2017-09-18 kneidels

Si vous utilisez l'arbre de balisage normal de conteneur, ligne, colonne, vous pouvez simplement mettre votre grand col-sm-4 premier suivi d'un col-sm-8 et ajouter la classe de d-flex flex-column à la col-sm-8 puis à l'intérieur de la col-sm-8 vous pouvez avoir 2 divs avec la classe de col et ils rempliront la région de leurs parents afin que votre balisage ressemblerait à ce qui suit:

<div class="container"> 
    <div class="row"> 
    <div class="col-sm-4" style="height:400px;">Regular col-sm-4</div> 
    <div class="col-sm-8 d-flex flex-column p-0"> 
     <div class="col">Flex item inside col-sm-8</div> 
     <div class="col">Flex item inside col-sm-8</div> 
    </div> 
    </div> 
</div>

Si vous n'êtes pas en utilisant l'arbre balisage bootstraps alors vous devrez lancer le comportement flexible sur le div extérieur comme ceci:

<div class="d-flex"> 
    <div class="col-sm-4" style="height:400px;">Regular col-sm-4</div> 
    <div class="col-sm-8 d-flex flex-column p-0"> 
    <div class="col">Flex item inside col-sm-8</div> 
    <div class="col">Flex item inside col-sm-8</div> 
    </div> 
</div>

Alors, comment cela fonctionne est les lignes de bootstrap utilisent le comportement flex déjà pour créer leur grille de sorte qu'ils ont déjà le display:flex dans le css de la ligne et en ajoutant la classe .col à l'intérieur de votre d-flex flex-column vous initiez le comportement flex sur votre .col-sm-8 et la classe .col a flex-grow: 1; `dans le css déjà pour que vos conteneurs enfants de votre colonne flex remplissent la hauteur.

L'espoir qui fait sens est ici un violon mis à jour Fiddle Demo

Note: Vous voulez probablement ajouter la classe de p-0 à la colonne flex pour éliminer les colonnes rembourrage comme je l'ai fait dans les exemples ci-dessus

Source

2017-09-18 23:34:13

Merci @ steve-k! Question: cela ne semble pas fonctionner lorsque les 2 rangs sur la droite doivent être de hauteurs différentes, n'est-ce pas? – kneidels

Vous pouvez simplement supprimer la classe .col de l'une des colonnes de droite ne pense pas que cela importe et peut-être lui donner la classe de px-3 de sorte qu'il a le même remplissage que le .col puis le .col reste juste remplissez la pièce supplémentaire dans la colonne flexible. Cela a-t-il du sens? –

De quel type de soutien de navigateur avez-vous besoin pour cela? Une attaque possible utiliserait CSS Grid. La grille est relatively well supported, et s'améliore tout le temps.

Source

2017-09-18 22:02:39 Bricky

Tous les navigateurs modernes + mobiles. Je suis assez bloqué sur l'utilisation de bootstrap – kneidels

bootstrap 4 alignement vertical

Répondre

Questions connexes