Bootstrap 4 베타: 열 오프셋 제거 및 복원

Bootstrap 4는 베타 1 릴리스에서 열 오프셋 방식에 중요한 변경 사항을 도입했습니다. 열이 오프셋되었습니다. 그러나 후속 베타 2 릴리스에서는 이러한 변경 사항이 취소되었습니다.

offset-md-*에서 ml-auto로

Bootstrap 4 Beta 1에서는 offset-md-* 클래스가 제거되었습니다. 대신 개발자는 .ml-auto 클래스를 사용하여 열을 오프셋하도록 권장되었습니다. 그러나 이 방법은 이전 접근 방식과 동일한 수준의 정밀도를 제공하지 못했습니다.

베타 2에서 오프셋 클래스 복원

다행히 베타 2에서는 오프셋 클래스가 복원되었습니다. 새로운 구문은 이전 col-{breakpoint}-offset- 구문을 대체하는 offset-{breakpoint}- 형식을 사용합니다.

사용자 정의 오프셋

현재 더 이상 사용되지 않는

  <div>

ml-auto 및 mr-auto 사용

인접한 두 열을 가운데에 배치하려면, 개발자는 두 열 모두에 ml-auto 및 mr-auto를 적용할 수 있습니다.

    <div>

mx-auto 사용

단일 열을 중앙에 배치하려면 개발자는 mx-auto를 사용하여 양쪽에 동일한 여백을 만들 수 있습니다.

결론

Bootstrap 4의 열 오프셋 제거 및 복원은 개발자에게 일시적인 혼란을 야기했습니다. 그러나 베타 2에 특정 오프셋 클래스가 다시 도입되고 해결 방법이 제공되면서 개발자는 Bootstrap 4에서 계속해서 사용자 정의 열 레이아웃을 구현할 수 있습니다.