Bootstrap 4에서 남은 높이를 행으로 채우는 방법은 무엇입니까?

Bootstrap 4: 남은 높이를 행으로 채우기

Bootstrap 4에서 사용 가능한 남은 높이에 해당하는 행을 달성하는 것은 어려울 수 있지만 가능합니다. flex-grow-1 클래스를 사용하여 이를 수행하는 방법을 살펴보겠습니다.

현재 문제 및 원인

제공된 코드에서 h-100을 사용하여 행과 중첩된 열의 높이를 설정합니다. 그러나 이 접근 방식은 중첩된 열(파란색 행 포함)이 상위 열 내에서 확장되기 때문에 화면 하단에 공백을 생성합니다.

해결책: flex-grow-1 활용

Bootstrap 4.1에서는 요소에 고유 크기 0을 할당한 다음 확장하는 flex-grow-1 클래스를 도입했습니다. 남은 공간을 채우기 위해. 이 경우에는 확장이 필요한 행에 적용하겠습니다.

수정된 코드

수정된 코드는 다음과 같습니다.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<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>
<p><strong>설명</strong></p>
<p>수정본에 코드:</p>
<ul>
<li>상위 열(빨간색 배경)의 높이는 h-100을 사용하여 100%로 설정됩니다.</li>
<li>중첩 열은 d-가 있는 div로 래핑됩니다. flex flex-column 클래스는 자식을 수직 열로 배열하고 사용 가능한 높이 내에서 성장할 수 있도록 합니다.</li>
<li>두 번째 행(파란색 background)에는 이제 flex-grow-1 클래스가 적용되었습니다. 이는 행이 상위 열 내의 나머지 높이를 확장하고 채우도록 지시합니다.</li>
</ul>
<p>이제 파란색 행이 확장되어 빨간색 열 내에서 사용되지 않은 공간을 모두 차지하여 원하는 효과를 얻습니다. 남은 높이를 채워주세요.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

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