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

이전 기사：IE7 및 IE8에서 Box Shadow 호환성을 어떻게 얻을 수 있습니까? 다음 기사：배경 밝기에 따라 텍스트 색상을 동적으로 조정하려면 어떻게 해야 합니까?

본 웹사이트의 성명

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

저자별 최신 기사

최신 이슈

function_exists()는 사용자 정의 함수를 결정할 수 없습니다. 기능 테스트() {                                                                                ...

에서 2024-04-29 11:01:01

0

2

1840

Chrome 모바일 버전을 표시하는 방법 안녕하세요 선생님, Chrome을 모바일 버전으로 어떻게 변경하나요?

에서 2024-04-23 00:22:19

0

10

2009

자식 창이 부모 창을 작동하지만 출력이 응답하지 않습니다. 처음 두 문장은 실행 가능하지만 마지막 문장은 구현할 수 없습니다.

에서 2024-04-19 15:37:47

0

1

1694

상위 창에 출력이 없습니다. document.onclick = function(){ window.opener.document.write('나는 자식 창의 출력입니다.');

에서 2024-04-18 23:52:34

0

1

1594

CSS 마인드맵 코스웨어는 어디에 있나요? 코스웨어

에서 2024-04-16 10:10:18

0

0

1612

관련 주제

더>

• 아비브(Aviv)는 어떤 코인인가요?
• 모바일 운영체제란 무엇입니까?
• 일반적인 컴퓨터 명령 모음
• 클라우드 서버란 무엇입니까?
• 컴퓨터 창을 활성화하는 방법
• 무선 네트워크 카드를 연결할 수 없습니다
• 포트 445를 닫는 방법
• 연결되었으나 인터넷에 접속할 수 없음