Bootstrap 4행 채우기 남은 높이를 만드는 방법은 무엇입니까?

Bootstrap 4: 행에 남은 높이 채우기

Bootstrap 4에서는 남은 수직 공간을 완전히 차지하는 행을 만드는 것이 어려울 수 있습니다. 기본적으로 행에 h-100 클래스를 추가하면 의도한 대로 작동하지 않습니다.

해결책: Flexbox

나머지 높이를 채우기 위해 행을 늘리려면, Bootstrap 4.1 flexbox 속성 flex-grow-1을 활용하세요. 이 클래스를 사용하면 요소가 컨테이너의 남은 사용 가능한 공간을 채울 만큼 커질 수 있습니다.

구현

솔루션을 구현하는 방법은 다음과 같습니다.

1. 컨테이너 높이 추가: 컨테이너 요소(컨테이너 유체)의 높이를 다음으로 설정합니다. 100%.
2. Flexbox 열 내에 열 중첩: d-flex 및 flex-column 클래스를 사용하여 div 내에서 열을 래핑합니다.
3. flex 적용 -grow-1: 남은 부분을 채워야 하는 행에 flex-grow-1 클래스를 추가합니다. height.

예제 코드

<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>

결과:

파란색 행(ROW 2)은 이제 빨간색 열의 나머지 높이를 채우기 위해 확장합니다.

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