Laravel pagination-sm pagination-lg 类不能针对不同的断点一起工作答案

【问题标题】：Laravel pagination-sm pagination-lg class not working together for different breakpointLaravel pagination-sm pagination-lg 类不能针对不同的断点一起工作
【发布时间】：2019-11-14 04:32:32
【问题描述】：

这是我正在尝试的，但只有 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>

【问题讨论】：

pagination-sm 不是特定于媒体查询的 CSS。这意味着分页项必须在所有视图中显示为小。如果您需要为小型和大型设备提供不同的样式，则需要添加一些自定义媒体查询 CSS 来做到这一点
你能建议我怎么做吗？

标签： laravel bootstrap-4

【解决方案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>

【讨论】：