ㄧ.導欄列位置固定

<div id="demo" class="component container">
  <ul class="pagination pagination-sm">
    <li class="page-item disabled"><a href="#" class="page-link">前進</a></li>
    <li class="page-item active"><a href="#" class="page-link">1</a></li>
    <li class="page-item"><a href="#" class="page-link">2</a></li>
    <li class="page-item"><a href="#" class="page-link">3</a></li>
    <li class="page-item"><a href="#" class="page-link">後退</a></li>
  </ul>
</div>

.demo.component{
  padding: 50px;
}

重點：

1.ul.pagination為分頁器最外層的結構
2.li.page-item為分頁器類別
3.a.page-link為分頁氣的a連結
4. .disabled為禁用按鈕
5. .active為目前的頁數

codepen
參考：bootstrap4