communauté Apprendre Bibliothèque d'outils Loisirs

Français

Maison > interface Web > tutoriel CSS > Comment remplir la hauteur restante d'une ligne Bootstrap 4 avec Flexbox ?

Comment remplir la hauteur restante d'une ligne Bootstrap 4 avec Flexbox ?

Linda Hamilton

Libérer： 2024-11-27 13:39:12

original

573 Les gens l'ont consulté

How to Fill Remaining Height of a Bootstrap 4 Row with Flexbox?

Comment remplir la hauteur restante d'une ligne Bootstrap 4

Agrandir une ligne pour occuper l'espace restant de l'écran peut être obtenu à l'aide de Bootstrap 4 . Pour ce faire, évitez d'ajouter h-100 à la classe de ligne pour éviter des espaces supplémentaires. Utilisez plutôt la classe flex-grow-1, comme illustré ci-dessous :

<br>html, body {</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">height: 100%;

Copier après la connexion

}

.container -fluide {

height: 100%;

Copier après la connexion

}

.row {

justify-content-center;
height: 100%;

Copier après la connexion

}

.col-4 {

background: rgb(196, 50, 53);

Copier après la connexion

}

.col-8 {

background: rgb(74, 74, 74);

Copier après la connexion

}

.bg-violet {

background: rgb(48, 0, 50);

Copier après la connexion

}

.bg-blue {

background: rgb(50, 101, 196);
flex-grow: 1;

Copier après la connexion

}

Dans la colonne rouge , imbriquez une autre colonne avec une flexbox verticale en utilisant d-flex et flex-column. Une ligne se voit attribuer une hauteur fixe (par exemple, 150 px), tandis que l'autre se voit attribuer flex-grow-1, ce qui garantit qu'elle s'étend pour remplir l'espace restant. Enfin, incluez la classe text-white pour le texte blanc sur les arrière-plans colorés.

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!

source：php.cn

Article précédent：Comment puis-je changer la couleur d’arrière-plan dans Three.js ? Article suivant：Sélecteurs CSS : débloquer des sélecteurs avancés pour une conception Web moderne

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Derniers articles par auteur

Derniers numéros

function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...

Depuis 2024-04-29 11:01:01

2049

Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?

Depuis 2024-04-23 00:22:19

2204

La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...

Depuis 2024-04-19 15:37:47

1862

Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...