> 웹 프론트엔드 > CSS 튜토리얼 > Bootstrap 4 Beta에서 사용자 정의 열 오프셋을 달성하는 방법은 무엇입니까?

Bootstrap 4 Beta에서 사용자 정의 열 오프셋을 달성하는 방법은 무엇입니까?

Barbara Streisand
풀어 주다: 2024-11-09 07:59:02
원래의
651명이 탐색했습니다.

How to Achieve Custom Column Offsets in Bootstrap 4 Beta?

Bootstrap 열 오프셋이 작동하지 않음: 해결 방법

Bootstrap 4 Beta에서 열 오프셋은 개발자에게 우려의 원인이 된 것 같습니다. 이전에 사용된 offset-md-* 클래스는 문서에 따라 제거되었습니다. 하지만 이 문제는 베타 2에서 일시적으로 해결되어 익숙한 오프셋 클래스가 다시 돌아왔습니다.

그러나 베타 1에서는 .ml-auto 수업. 이 방법은 실제로 col-md-4 열을 대체할 수 있지만 4개 열의 오프셋을 발생시킵니다. 이는 대부분의 개발자가 추구하는 것이 아닙니다. 그들은 이전의

와 같은 맞춤형 오프셋을 원합니다.

대용으로

를 사용하는 것은 효과가 없는 것으로 나타났습니다. 그렇다면 이것은 버그인가요, 아니면 실행 가능한 해결 방법이 있나요?

다행히 오프셋 클래스 복원으로 문제가 해결되었습니다. 그럼에도 불구하고 베타 1에 도입된 새로운 자동 여백은 여전히 ​​열 오프셋에 사용될 수 있습니다. 이러한 여백은 열을 가능한 한 오른쪽으로 이동시킵니다. 결과적으로 오프셋 양은 사용 가능한 공간에 따라 달라집니다.

col-md-4 오른쪽에 다른 열이 없으면 행의 오른쪽 전체를 차지합니다.

대체 솔루션

또는 더미 열을 구현하여 2열 오프셋을 얻을 수 있습니다.

<div class="row">
  <div class="col-md-2"></div>
  <div class="col-md-4">
    ...
  </div>
</div>두 </p>
<p>col-md-4<strong> 열을 중앙에 맞추려면 </strong> ml-auto<strong> 및 </strong>mr-auto<strong>를 활용할 수 있습니다.</strong></p>
<pre class="brush:php;toolbar:false"><div class="row">
  <div class="col-md-4 ml-auto">
    .
  </div>
  <div class="col-md-4 mr-auto">
    .
  </div>
</div>
로그인 후 복사
마지막으로 단일

col-md-4 열을 중앙에 배치하려면 다음을 사용하세요. mx-auto 양쪽의 여백이 같은 경우:

<div class="row">
  <div class="col-md-4 mx-auto">
    .
  </div>
</div>
로그인 후 복사

참고: 특정 열 오프셋 클래스는 베타 2에 다시 도입됩니다.

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

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿