J'ai du mal à empiler mes colonnes correctement à l'aide de Bootstrap - comme vous pouvez le constater à partir de l'image, j'ai besoin de la boîte noire positionnée en dessous de la boîte verte, mais je ne peux pas obtenir cela pour travailler:
Voici le code que j'utilise: peut-il dire quelqu'un s'il vous plaît dites-moi où je me trompe ici? merci
4 Réponses :
Vous avez 2 colonnes et vous mettez d'abord DIV en 1 colonne et une deuxième fois à l'intérieur de la 2 une et la division suivante iront en Angain à l'intérieur de la colonne 1, plus facile de placer Noir DIV sous le vert consiste à créer un autre DIV Blank
<div class="container-fluid">
<div class="row">
<div class="col-lg-6 col-md-12" style="background-color:blue; height:600px;"></div>
<div class="col-lg-6 col-md-12 " style="background-color:green; height:300px;"></div>
<div class="col-lg-6 col-md-12" style="height:300px;"></div>
<div class="col-lg-6 col-md-12" style="background-color:black; height:300px;"></div>
</div>
</div>
bootstrap 4 est mobile en premier. Donc, la première chose est d'inverser l'ordre de vos classes.
Le problème est que vous définissez la largeur de vos boîtes pour être la moitié de la largeur de la ligne sur le bureau et les lignes sont définies pour envelopper par défaut dans Bootstrap. p>
Définissez les colonnes sur la pleine largeur avec COL-12. P>
<div class="container-fluid">
<div class="row">
<div class="col-12 col-lg-6 offset-lg-3" style="background-color:blue; height:600px;"></div>
<div class="col-12 col-lg-6 offset-lg-3" style="background-color:green; height:300px;"></div>
<div class="col-12 col-lg-6 offset-lg-3" style="background-color:black; height:300px;"></div>
</div>
</div>
BOOTSTRAP 4 utilise Flexbox afin que les colonnes ne vont pas "flotter" les unes des autres comme ils l'avaient fait dans Bootstrap 3. Vous pouvez remplacer ce comportement en activant des flotteurs sur les largeurs d'écran AVIS Utilisation du bloc https://www.codesply.com/go/7kllzbaggu Voir aussi: LG . d-lg-block et float-gauche classes.
Vous pouvez nier la colonne bleue et verte dans une autre colonne. de cette façon la colonne verte et noire est contenue à l'intérieur du côté "droit". Les autres réponses fonctionnent aussi mais elles changent le comportement de la grille de bootstrap ou se fractionnent le contenu, ce que je ne pense pas est idéal.
Démarrez une nouvelle ligne ou donnez-la en pleine largeur avec
col-lg-12Ce que vous voulez, donnez une capture d'écran de cela
Il semble y avoir des CSS personnalisés là-bas. Pourriez-vous poster un exemple de travail s'il vous plaît?