반응 부트 스트랩 테이블의 페이지 매김 스타일을 변경하는 방법이 있습니까?

Question

react-bootstrap-table의 페이지 매김 행에 대한 기본 스타일은 부트 스트랩 격자 열 사이징 클래스 이름 (예 : "col-xs-6")을 사용합니다. 우리는 기본값 (12 대신 60)을 사용하는 다른 크기의 그리드를 사용하므로 페이지 매김 요소는 왼쪽 끝까지가는 작은 열로 스며들게됩니다.

클래스 이름을 "col-xs-30"으로 설정하면 문제가 해결됩니다. 그러나 페이지 매김 스타일을 조정할 수있는 옵션이 없습니다.

페이지 매김 요소를 완전히 사용자 정의 렌더링하는 방법이 있습니다. 그게 유일한 방법인가요? 원본을 복사하고 크기 만 변경하면됩니까?

Answer 1

documentation for pagination이 표시되면 이것이 그리드의 페이지 매김을 조정할 수있는 유일한 방법 인 것으로 보입니다.

, 당신은 항상 매김 요소에 대한 상위 클래스를 사용할 수 있습니다이 말을 (여기 사용자 정의 매김 섹션을 참조), 그 는 BS-테이블 매김-반응이 시점에서 CSS를 오버라이드 (override), 따라서 더 거기에 없다 반응성 부트 스트랩 테이블 옵션을 연결하여 고유 한 클래스를 페이지 매김에 추가하십시오.

<div class="react-bs-table-pagination"> 
    <div class="row" style="margin-top: 15px;"> 
     <div> 
      <div class="col-md-6 col-xs-6 col-sm-6 col-lg-6"> 
       <span class="dropdown react-bs-table-sizePerPage-dropdown" style="visibility: visible;"> 

        <!-- ... --> 
        <!-- DROPDOWN CODE --> 
        <!-- ... --> 

       </span> 
      </div> 
      <div class="col-md-6 col-xs-6 col-sm-6 col-lg-6" style="display: block;"> 
       <ul class="react-bootstrap-table-page-btns-ul pagination"> 

        <!-- ... --> 
        <!-- PAGINATION ELEMENT CODE --> 
        <!-- ... --> 

       </ul> 
      </div> 
     </div> 
    </div> 
</div>