한 항목을 한 행 중앙에 배치하지만 다른 항목은 오른쪽으로 이동
크레이그 암스트롱
Bootstrap4와 함께 NgBootstrap을 사용하고 있으며 페이지 매김을 페이지 중앙에 배치하고 싶지만 오른쪽에 페이지 크기 드롭 다운이 있습니다. 나는 현재 이것을 가지고있다.
<div class="d-flex">
<ngb-pagination class="mx-auto"
[collectionSize]="(total$ | async)!" [(page)]="globalListService.page" [pageSize]="globalListService.pageSize">
</ngb-pagination>
<select class="custom-select float-right" style="width: auto" name="pageSize" [(ngModel)]="globalListService.pageSize">
<option [ngValue]="2">2 items per page</option>
<option [ngValue]="4">4 items per page</option>
<option [ngValue]="6">6 items per page</option>
</select>
</div>
그러나 예상대로 오른쪽 여백은 여전히 드롭 다운이 차지하는 공간을 고려합니다. 페이지 매김이 정확히 중앙에 배치되기를 원합니다.
작업 솔루션 :
<div class="d-flex justify-content-center">
<ngb-pagination class="position-absolute"
[collectionSize]="(total$ | async)!" [(page)]="globalListService.page" [pageSize]="globalListService.pageSize">
</ngb-pagination>
</div>
<div class="d-flex justify-content-end">
<select class="custom-select" style="width: auto" name="pageSize" [(ngModel)]="globalListService.pageSize">
<option [ngValue]="2">2 items per page</option>
<option [ngValue]="4">4 items per page</option>
<option [ngValue]="6">6 items per page</option>
</select>
</div>
Sidharth Rathi
이는 둘 다 동일한 문서 흐름에 있기 때문에 발생합니다. 절대 위치를 사용하여 문서 흐름에서 제거 할 수 있습니다. 여기에 예제가 있습니다.
<ngb-pagination>예를 들어 ID를 제공하십시오 .my-pagination.- 당신의에서
CSS이러한 속성 사용 :
#my-pagination {
position: absolute;
z-index: 2;
left: 50%;
right: 50%;
}
이제 화면 크기에 관계없이 페이지 매김이 중앙에 있고 다른 요소의 여백에 영향을받지 않습니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
에서 수정
관련 기사
Related 관련 기사
- 1
동일한 프로젝트에서 여러 다른 항목을 실행하는 방법은 무엇입니까?
- 2
드래그 앤 드롭으로 목록보기 항목을 한 목록에서 다른 목록으로 이동하는 방법은 무엇입니까? UWP C #
- 3
순서가 지정되지 않은 목록 내에서 목록 항목을 다른 항목과 동일한 너비로 만들려면 어떻게합니까?
- 4
항목이 PHP에서 동일한 배열의 다른 항목과 일치하는지 확인
- 5
목록에서 중복 항목을 제거하고 다른 목록과 동일한 지 확인하십시오.
- 6
파이썬에서 한 목록에서 다른 목록으로 항목을 이동하는 방법은 무엇입니까?
- 7
다른 테이블에 중복 항목이있는 한 테이블의 행을 업데이트하는 방법
- 8
특정 목록 항목을 가져오고 한 활동에서 다른 활동으로 두 값을 전달하는 방법은 무엇입니까?
- 9
OL의 한 항목을 오른쪽에 정렬하고 다른 항목은 왼쪽에 정렬하는 방법은 무엇입니까?
- 10
Pandas는 한 열에 중복 항목을 삭제하고 다른 열에 가장 빈번한 값이있는 행만 유지합니다.
- 11
동일한 키를 가진 맵 목록을 한 항목에 병합하지만 다른 필드를 사용하는 것은 동일하지 않습니다.
- 12
항목 당 4 개의 행을 표시하고 나머지 항목은 다른 행으로 이동
- 13
UICollectionView에서 DetailView로 구조체 배열을 전달하고 인덱스를 사용하여 한 항목에서 다른 항목으로 이동합니까?
- 14
Tkinter에서 한 목록 상자에서 다른 목록 상자로 여러 항목을 이동하는 방법은 무엇입니까?
- 15
다른 모듈 파일의 동일한 변수 이름은 항상 마지막 항목을 반환합니다.
- 16
동일한 행의 다른 일반 항목에 의해 배열의 PHP 합계 항목
- 17
동일한 행의 다른 열 값이 0 인 중복 항목 삭제
- 18
C #에서 중복 항목을 확인한 다음 중복 항목이 없으면 쿼리 삽입 실행
- 19
동일한 항목이 다른 목록에있는 경우 한 Excel 목록에서 항목을 제거하는 방법
- 20
다른 배열의 항목과 동일한 배열에서 항목을 제거하는 방법은 무엇입니까?
- 21
중앙 목록이 설정에서 오른쪽으로 이동하는 것을 중지하는 방법
- 22
자바 스크립트 : 한 배열에서 다른 배열로 항목을 무작위로 이동하려고
- 23
테이블의 각 행에 대한 다른 메뉴 항목
- 24
항목의 하위 항목을 상위 항목과 동일한 행으로 가져 오는 SQL 쿼리
- 25
Pandas-다른 열에 동일한 값이있는 행 내의 한 열에서 중복 된 항목 찾기
- 26
한 열을 기준으로 중복 항목을 제거한 다음 "이전"중복 항목을 다른 시트로 이동
- 27
동시에 여러 개의 클릭 가능한 항목을 탭하면 모든 항목이 실행됩니다.
- 28
한 항목에서 다른 항목으로 입력 컨트롤을 가져 오거나 복사하는 방법은 무엇입니까?
- 29
list에서 항목을 찾고 linq를 사용하여 동일한 위치의 다른 목록에서 다른 항목을 가져옵니다.
몇 마디 만하겠습니다