Question

这是我正在尝试的方法，但是只有pagination-sm类适用于所有断点

<ul class="pagination mb-0 pagination-sm pagination-lg" role="navigation">
    <li class="page-item"><a href="#">Previous</a></li>
    <li class="page-item"><a href="#">1</a></li>
    <li class="page-item"><a href="#">2</a></li>
    <li class="page-item"><a href="#">3</a></li>
    <li class="page-item"><a href="#">Next</a></li>
</ul>

Answer 1

pagination-sm不是特定于媒体查询的CSS。这意味着在所有视图中分页项都必须显示为小尺寸。如果您需要为小型和大型设备使用不同的样式，则需要添加一些自定义媒体查询CSS。

.pagination .page-link {
  padding: .25rem .5rem;
}

@media screen and (min-width: 576px) {
  .pagination .page-link {
    padding: .5rem .75rem;
  }
}
@media screen and (min-width: 992px) {
  .pagination .page-link {
    padding: .75rem 1.5rem;
  }
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<nav aria-label="Page navigation example" class="mt-4">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
  </ul>
</nav>

Laravel分页-sm分页-lg类无法在不同的断点一起使用

1 个答案: