Bootstrap 4 Beta에서 사용자 정의 열 오프셋을 달성하는 방법은 무엇입니까?
- Barbara Streisand원래의
- 2024-11-09 07:59:02671검색
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.