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>

두

col-md-4 열을 중앙에 맞추려면 ml-auto 및 mr-auto를 활용할 수 있습니다.

<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 중국어 웹사이트의 기타 관련 기사를 참조하세요!