Bootstrap 4행의 남은 높이를 채우는 방법
Bootstrap 4를 사용하여 행을 확대하여 남은 화면 공간을 차지할 수 있습니다. 이를 수행하려면 추가 공백을 방지하기 위해 행 클래스에 h-100을 추가하지 마십시오. 대신, 아래 그림과 같이 flex-grow-1 클래스를 활용하세요:
<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%;}
.container -체액 {
height: 100%;
}
.row {
justify-content-center; height: 100%;
}
.col-4 {
background: rgb(196, 50, 53);
}
.col-8 {
background: rgb(74, 74, 74);
}
.bg-보라색 {
background: rgb(48, 0, 50);
}
.bg-blue {
background: rgb(50, 101, 196); flex-grow: 1;
}
빨간색 열 내에서 d-flex 및 flex-column을 사용하여 수직 Flexbox가 있는 다른 열을 중첩합니다. 한 행에는 고정 높이(예: 150px)가 할당되고, 다른 행에는 flex-grow-1이 할당되어 나머지 공간을 채울 수 있도록 확장됩니다. 마지막으로 화려한 배경에 흰색 텍스트를 위한 text-white 클래스를 포함합니다.
위 내용은 Flexbox를 사용하여 Bootstrap 4행의 남은 높이를 채우는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
