푸시 및 풀 클래스를 사용하여 가변 화면 크기로 반응형 부트스트랩 열 레이아웃을 달성하는 방법은 무엇입니까?

가변 화면 크기를 갖춘 반응형 부트스트랩 열 레이아웃

웹 개발에서는 뷰어의 환경에 따라 페이지 레이아웃을 조정해야 하는 경우가 많습니다. 화면 크기. Bootstrap은 push 및 pull 클래스를 사용하여 이 작업을 수행하는 편리한 방법을 제공합니다.

Bootstrap에서 열 밀기 및 당기기

열을 밀거나 당기려면 적절한 클래스를 추가하기만 하면 됩니다. 열의 HTML 요소에. 이러한 클래스의 구문은 다음과 같습니다.

col-{breakpoint}-{size}

예를 들어 작은 화면(예: "xs")에서 한 열을 두 열 오른쪽으로 푸시하려면 col-xs-push- 클래스를 추가합니다. 2. 마찬가지로 대형 화면(예: "lg")에서 세 개의 열을 왼쪽으로 당기려면 col-lg-pull-3 클래스를 추가합니다.

더 작은 화면에서 열 밀기/당기기 화면 크기

주어진 질문에서 원하는 레이아웃을 얻으려면 먼저 더 작은 화면 크기를 대상으로 하는 클래스를 사용하는 것이 중요합니다. 이를 통해 모바일 우선 접근 방식이 유지됩니다.

<div class="col-lg-3 col-xs-6">1</div>
<div class="col-lg-3 col-xs-6 col-lg-push-6">5</div>
<div class="col-lg-2 col-xs-4 col-lg-pull-3">2</div>
<div class="col-lg-2 col-xs-4 col-lg-pull-3">3</div>
<div class="col-lg-2 col-xs-4 col-lg-pull-3">4</div>

위 내용은 푸시 및 풀 클래스를 사용하여 가변 화면 크기로 반응형 부트스트랩 열 레이아웃을 달성하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!