Flexbox를 사용하여 Bootstrap 4행의 남은 높이를 채우는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

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

Linda Hamilton

Nov 27, 2024 pm 01:39 PM

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

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

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.