부트스트랩 4행이 남은 높이를 차지하도록 만드는 방법은 무엇입니까?

Bootstrap 4에서 행 채우기 남은 높이를 만드는 방법

질문

Bootstrap 4에서 행을 늘려서 공간을 차지하는 방법은 무엇입니까? 남은 사용 가능한 높이? 행 클래스에 h-100을 추가하면 화면 하단에 공백이 남습니다.

샘플 코드

<div class="container-fluid h-100">
  <div class="row justify-content-center h-100">
    <div class="col-4 bg-red">
      <div class="h-100">
        <div class="row justify-content-center bg-purple">
          <div class="text-white">
            <div>

해결 방법

남은 공간을 채우려면 파란색 행이 있는 빨간색 열, Bootstrap 4.1 클래스 사용 flex-grow-1.

...
<div class="row justify-content-center bg-blue flex-grow-1">
  <div class="text-white">ROW 2 - grow remaining height</div>
</div>
...

수정된 코드

<div class="container-fluid h-100">
  <div class="row justify-content-center h-100">
    <div class="col-4 bg-red">
      <div class="h-100 d-flex flex-column">
        <div class="row justify-content-center bg-purple">
          <div class="text-white">
            <div>

예

[라이브 데모 보기](https://codeply.com/go/Iyjsd8djnz )

위 내용은 부트스트랩 4행이 남은 높이를 차지하도록 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!