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

Bootstrap 4에서 열 사이의 수직 공간 제거

문제 설명:

Bootstrap 4에서 , 2열 레이아웃을 사용하는 경우 뷰포트가 "모바일 모드"가 아닐 때 열 사이에 빈 수직 공간이 나타납니다.

원인:

부트스트랩 4 모든 열의 높이를 가장 높은 열과 일치하도록 정렬하는 Flexbox를 활용합니다.

제안 솔루션: 부동 소수점 사용

빈 공간을 피하려면 대신 부동 소수점 사용을 고려하세요.

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

설명:

• d-lg-block 클래스는 행의 표시 속성을 큰 뷰포트에서 차단하도록 설정하여 열이 다음을 허용하도록 합니다. float.

추가 참고 사항:

• 이 경우 중첩 열(
  )은 원하는 열 순서를 달성하지 못합니다.
• 참고로 관련 주제인 '모바일 버전에서 순서가 다른 부트스트랩'에도 비슷한 내용이 나와 있습니다.