Lagvel pagination-sm pagination-lg класс не работает вместе для разных точек останова

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>