부트스트랩 4행을 확장하여 남은 높이를 채우는 방법은 무엇입니까?

Bootstrap 4 - 남은 높이를 채우기 위해 행 확장

이 기사에서는 행을 확장하여 남은 높이를 채우는 방법을 살펴보겠습니다. Bootstrap 4를 사용합니다.

문제:

사용 가능한 높이의 나머지 부분을 차지하기 위해 행을 늘려야 하는 상황이 발생할 수 있습니다. h-100 클래스를 사용하려고 시도했지만 화면 하단에 과도한 공백이 나타납니다.

해결 방법: Bootstrap 4.1 flex-grow-1 클래스

Bootstrap 4.1 요소가 상위 컨테이너 내의 나머지 공간을 채우기 위해 확장될 수 있도록 하는 flex-grow-1 클래스를 도입합니다. 이 클래스를 활용하면 원하는 결과를 얻을 수 있습니다.

수정된 코드 조각은 다음과 같습니다.

<br>html,body{height:100%;}</p> <p>.bg-purple {<br> 배경: rgb(48,0,50);<br>}<br>.bg-gray {<br> 배경: rgb(74,74,74);<br>}<br>.bg-blue {<br> 배경: rgb(50,101,196);<br>}<br>.bg-red {<br> 배경: rgb(196,50,53);<br>} </p>
<p><div> <div class="row justify-content-center h-100"></p>
<pre class="brush:php;toolbar:false"><div>