Flexbox를 사용하여 Bootstrap 4행의 남은 높이를 채우는 방법은 무엇입니까?

Bootstrap 4행의 남은 높이를 채우는 방법

Bootstrap 4를 사용하여 행을 확대하여 남은 화면 공간을 차지할 수 있습니다. 이를 수행하려면 추가 공백을 방지하기 위해 행 클래스에 h-100을 추가하지 마십시오. 대신, 아래 그림과 같이 flex-grow-1 클래스를 활용하세요:

<br>html, body {<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 중국어 웹사이트의 기타 관련 기사를 참조하세요!