> 웹 프론트엔드 > CSS 튜토리얼 > Bootstrap 4 Beta의 열 오프셋은 어떻게 되었나요?

Bootstrap 4 Beta의 열 오프셋은 어떻게 되었나요?

Linda Hamilton
풀어 주다: 2024-11-08 00:50:02
원래의
873명이 탐색했습니다.

What Happened to Column Offsetting in Bootstrap 4 Beta?

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}- 형식을 사용합니다.

사용자 정의 오프셋

지금은 더 이상 사용되지 않는

더미 자리 표시자 사용

<br><div><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">  <div>
로그인 후 복사
과 같은 사용자 정의 열 오프셋을 달성하려면


ml-auto 및 mr-auto 사용

인접한 두 열을 중앙에 배치하기 위해 개발자는 다음을 수행할 수 있습니다. 두 열 모두에 ml-auto 및 mr-auto를 적용합니다.

<br><div><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">    <div>
로그인 후 복사


mx-auto 사용

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

결론

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

위 내용은 Bootstrap 4 Beta의 열 오프셋은 어떻게 되었나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
이전 기사:CSS가 내부 HTML을 기반으로 요소를 선택할 수 있습니까? 다음 기사:직접 액세스하지 않고 도메인 간 iFrame 콘텐츠의 스타일을 지정하는 방법은 무엇입니까?
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
관련 주제
더>
인기 추천
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿