Bootstrap 4로 마이그레이션한 후 열이 제대로 정렬되지 않는 이유는 무엇입니까?

Bootstrap 3에서 4로 마이그레이션할 때 수평 정렬 문제

Bootstrap 3에서 4로 전환하는 동안 사용자에게 수직 정렬 문제가 발생할 수 있습니다 열의 경우. 이 문제를 해결하려면 Bootstrap 4에 도입된 중첩 변경 사항을 고려하는 것이 중요합니다.

이전에는 Bootstrap 3에서 중첩 열을 동일한 열 클래스(예: col-12)가 있는 열 내에 배치할 수 있었습니다. 그러나 Bootstrap 4에서는 중첩을 수행하려면 각 중첩 수준마다 새 행이 필요합니다. 이 변경으로 인해 중앙 정렬 문제가 제거되고 적절한 가로 정렬이 보장됩니다.

업데이트된 코드는 수정된 중첩 접근 방식을 따릅니다.

<div class="row">
    <div class="col-md-2">
        <h1>TEST</h1>
    </div>
    <div class="col-md-2">
        <h1>TEST</h1>
    </div>
    <div class="col-md-2">
        <h1>TEST</h1>
    </div>
    <div class="col-md-2">
        <h1>TEST</h1>
    </div>
</div>

이 업데이트된 코드에서는 중첩이 제거되고 각 열이 자체 행에 배치됩니다. 권장 배열 지침을 준수하면 수평 정렬이 복원되어 적절한 시각적 표현이 보장됩니다.

위 내용은 Bootstrap 4로 마이그레이션한 후 열이 제대로 정렬되지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!