>웹 프론트엔드 >CSS 튜토리얼 >Bootstrap 4.0.0-beta에서 원하는 열 오프셋을 달성하는 방법은 무엇입니까?

Bootstrap 4.0.0-beta에서 원하는 열 오프셋을 달성하는 방법은 무엇입니까?

Patricia Arquette
Patricia Arquette원래의
2024-11-09 08:26:02712검색

How to Achieve Desired Column Offsets in Bootstrap 4.0.0-beta?

Bootstrap 열 오프셋 딜레마 해결

Bootstrap v4.0.0-beta에서는 이전에 사용했던 offset-md- * 열 오프셋 클래스가 제거되었습니다. 문서에서는 대신 .ml-auto를 사용할 것을 제안합니다. 그러나 이 접근 방식은 의도한 양 대신 열을 4만큼 오프셋하는 예기치 않은 동작을 초래합니다.

부트스트랩 4의 새로운 Flexbox 기반 레이아웃 시스템에서 불일치가 발생합니다. 오프셋 클래스는 더 이상 관련이 없습니다 열의 유연성 때문입니다. 사용자 지정 오프셋을 얻으려면 다음 해결 방법을 고려하세요.

  1. 자리 표시자 열:

    • 원하는 오프셋 크기의 더미 열을 추가합니다. 오프셋 열을 위한 공간을 만듭니다.
  2. 자동 여백(ml/mr-auto):

    • 여러 열을 중앙에 배치: 오프셋 열을 2로 나누고 각 열에 ml-auto 및 mr-auto를 적용합니다.
    • 단일 열을 중앙에 배치: mx-auto를 사용하여 동일한 항목 만들기

향후 변경 사항:
특정 열 오프셋이 Bootstrap 4의 베타 2에 다시 도입된다는 점에 유의하는 것이 중요합니다. 이렇게 하면 offset-md-2와 같은 클래스를 사용하여 정확한 열 대체를 달성하는 기능이 복원됩니다.

위 내용은 Bootstrap 4.0.0-beta에서 원하는 열 오프셋을 달성하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.