사파리(Safari)에서 부트스트랩(Bootstrap)4 그리드 오류 수정하기

safari

사파리 브라우저에서 부트스트랩 4 그리드에 문제가 있을 때 수정하는 방법입니다. 이전에는 잘 작동했었는데 더 이상 보이지 않는다면 아래 방법으로 해결해 봅시다. 먼저 일반적으로 행 내에 3개의 열을 만드는 방법입니다.

<div class = "row">
   <div class = "col-4"> Column 4 </ div>
   <div class = "col-4"> Column 4 </ div>
   <div class = "col-4"> Column 4 </ div>
</ div>

그러나 사파리(Safari)에서는 나란히 배치되지 않고 모두 하나의 열에 속합니다. 아래 CSS로 쉽게 고칠 수 있습니다.

/**
Fixing bootstrap columns for safari
 */
.row:before, .row:after{
 display: inline-block !important;
}

이것은 행 :before 및 :after 의 표준 부트스트랩 스타일을 대체합니다. 도움이 되었으면 좋겠습니다. 이상으로 포스팅을 마치겠습니다.