Bootstrap 4에서 열 사이의 빈 수직 공간을 제거하는 방법은 무엇입니까?

Bootstrap 4에서 열 사이의 빈 세로 공간 처리

Bootstrap 4에서 열을 사용할 때 흔히 발생하는 문제 중 하나는 특히 열 사이에 빈 세로 공간이 있다는 것입니다. 더 큰 뷰포트. 이는 Bootstrap 4가 열 높이를 정렬하는 Flexbox 레이아웃을 구현하기 때문에 발생할 수 있습니다.

동작 이해

Flexbox 레이아웃에서는 행 내의 모든 열이 가장 높은 열과 동일한 높이가 됩니다. 열. 예를 들어, 높이가 서로 다른 세 개의 기둥이 있는 경우 가장 높은 기둥의 높이와 일치하도록 두 개의 더 짧은 기둥이 수직으로 확장됩니다. 결과적으로 빈 공간이 나타납니다.

해결 방법: 부동 소수점 사용

열 중첩이 원하는 열 순서를 방해할 수 있으므로 Bootstrap 4의 해결책은 부동 소수점을 사용하는 것입니다. 이는 열이 서로 옆에 떠 있는 Bootstrap 3의 동작을 모방합니다.

빈 수직 공간을 제거하려면 다음 CSS를 사용할 수 있습니다.

.container {
  .row {
    display: block !important;
    .col {
      float: left;
    }
  }
}

이 코드는 기본 Flexbox 레이아웃을 사용하고 행의 표시 속성을 block으로 설정합니다. 또한 열의 부동 속성을 왼쪽으로 설정하여 서로 옆에 부동할 수 있도록 합니다.

구현 예

다음은 부동을 사용하여 빈 수직 공간을 제거하는 HTML 구조의 예입니다. :

<div class="container">
  <div class="row d-lg-block">
    <div class="col-lg-9 float-left description">...</div>
    <div class="col-lg-3 float-right sidebar">...</div>
    <div class="col-lg-9 float-left comments">...</div>
  </div>
</div>

플로트를 활용하면 빈 세로 공간이 나타나는 것을 방지하고 더 큰 공간에서도 원하는 열 순서를 유지할 수 있습니다. 뷰포트.

위 내용은 Bootstrap 4에서 열 사이의 빈 수직 공간을 제거하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!