Bootstrap 4 Div를 재정렬하는 방법: 데스크탑에서는 나란히, 모바일에서는 스택되어 있습니까?

Bootstrap 4를 사용하여 Div 재정렬: 데스크톱에서는 짧은 Div에 인접하고 모바일에서는 쌓인 키가 큰 Div

한 페이지에서 세 개의 div를 재정렬하는 것을 목표로 합니다. 웹 페이지, 데스크톱 장치에 나란히 표시되고 모바일에 스택됨

이를 달성하려면 열의 높이가 동일해지도록 하는 Bootstrap 4의 Flexbox 동작을 재정의해야 합니다. 너비가 더 크면 Flexbox를 비활성화해야 합니다. 그런 다음 부동 소수점을 사용하여 첫 번째 열(A)의 키가 더 크다는 점을 고려하여 두 번째 및 세 번째 열(B 및 C)이 자연스럽게 오른쪽으로 부동하도록 할 수 있습니다.

모바일 장치에서 재정렬을 완료하려면, flexbox order-property를 활용하세요. 이렇게 하면 열이 원하는 순서로 표시됩니다.

코드 조각:

<div class="container-fluid">
    <div class="row d-flex d-lg-block">
         <div class="col-lg-6 order-1 float-left">
            A
        </div>
        <div class="col-lg-6 order-0 float-left">
            B
        </div>
        <div class="col-lg-6 order-1 float-left">
            C
        </div>
    </div>
</div>

이 예에서 order-1 및 float-left CSS 클래스는 데스크탑 장치에서 원하는 배열을 확인하십시오. 모바일 장치에서는 d-flex 클래스가 비활성화되어 세 개의 div가 수직으로 쌓일 수 있습니다.

위 내용은 Bootstrap 4 Div를 재정렬하는 방법: 데스크탑에서는 나란히, 모바일에서는 스택되어 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!