두 개의 목록이있는 양식 도구와 그 사이에 도구 세트가 있으며 큰 화면에서 세 개의 열로 배치되어 있습니다.
<div class="row">
<div class="col-md-5">
AVAILABLE LIST (1)
</div>
<div class="col-md-2">
MOVEMENT BUTTONS (2)
</div>
<div class="col-md-5">
SELECTED LIST (3)
</div>
</div>
... 보시 다시피 xs 및 sm 뷰포트의 경우 레이아웃이 전체 너비 스택 목록으로 전환되어야합니다. 내가하고 싶은 것은 도구가 마지막 행이되도록 작은 뷰 포트 에서 MOVEMENT BUTTONS및 SELECTED LIST열의 위치를 바꾸는 것입니다 (1-2-3 => 1-3-2).
제가하는 데 문제는 내가 좋아하는 클래스를 추가 할 때이다 col-xs-pull-* col-sm-pull-*받는 사람 SELECTED LIST과 col-xs-push-* col-sm-push-*받는 MOVEMENT BUTTONS열, 버튼 열 사라져 선택한리스트가 정렬 부족합니다. 나는 col-*-push/pull1의 해당 값을 시도했습니다 ( 전체 너비 일 때 무엇이든 바꿔야하기 때문에 그렇지 않습니까? )와 12 ( 경우에 따라 ) 모두 의도하지 않은 결과가 동일합니다.
push/pull수정 자 클래스를 문제의 두 열에 적용 하여 재정렬 된 스택 xs과 sm뷰포트 를 달성하려면 어떻게해야합니까?
Twitter Bootstrap에 대해 알아야 할 한 가지 중요한 점은 모바일 우선 디자인 사고 방식을 취한다는 것입니다. 즉, 초소형 화면에 적용되는 클래스는 과부하가 걸리지 않는 한 대형 화면까지 적용됩니다.
이는 푸시 및 풀 클래스에도 해당됩니다. 따라서 여러분이해야 할 일은 버튼을 작은 화면에 배치하려는 방식으로 레이아웃 한 다음 더 큰 화면에서 원하는 위치로 버튼을 밀거나 당기는 것입니다.
즉, 작은 화면에서 원하는 위치에 HTML의 버튼을 배치하고 푸시 / 풀 중간 클래스를 사용하여 더 큰 화면으로 이동합니다.
밀고 당기는 개념을 보여주는 Bootply를 만들었습니다 . 그게 말이되는지 확인하십시오.
요점은 다음과 같습니다.
<div class="col-md-5">
AVAILABLE LIST (1)
</div>
<div class="col-md-5 col-md-push-2">
SELECTED LIST (3)
</div>
<div class="col-md-2 col-md-pull-5">
MOVEMENT BUTTONS (2)
</div>
푸시 클래스는 요소를 여러 열 오른쪽으로 이동하고 풀 클래스는 요소를 여러 열 왼쪽으로 이동합니다. 예를 들어, 크기 3의 첫 번째 요소와 크기 6의 두 번째 요소를 전환하려면 처음 6 개 열을 밀고 두 번째 3 개 열을 당겨서 위치를 효과적으로 전환해야합니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다