Laravel v5.2分页无Bootstrap优雅样式实现问题咨询

嘿，我来帮你搞定这个分页样式的问题！你现在遇到的垂直排列问题，本质是Laravel 5.2默认输出的分页HTML依赖Bootstrap的.pagination类实现水平布局，去掉Bootstrap后，列表元素就回到了垂直排列的默认样式。咱们可以通过自定义CSS轻松解决，不用依赖任何框架，还能做出优雅的样式。

第一步：添加自定义分页CSS #

把下面这段CSS放到你的项目样式文件里（比如public/css/custom.css），或者直接在页面的<style>标签里引入：

/* 基础分页容器样式 */
.pagination {
  list-style: none;
  margin: 20px 0;
  padding: 0;
  display: flex; /* 用flex实现水平排列，间距更易控制 */
  gap: 8px; /* 分页项之间的间距 */
  align-items: center;
}

/* 分页项样式 */
.pagination li {
  display: inline-block;
}

/* 分页链接和当前页/禁用项的通用样式 */
.pagination a, .pagination span {
  display: inline-block;
  padding: 8px 14px;
  text-decoration: none;
  color: #2d3748;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

/* 当前激活页样式 */
.pagination li.active span {
  background-color: #3182ce;
  color: white;
  border-color: #3182ce;
}

/* 禁用的上一页/下一页样式 */
.pagination li.disabled span {
  color: #a0aec0;
  border-color: #e2e8f0;
  cursor: not-allowed;
}

/* 链接 hover 效果 */
.pagination a:hover {
  background-color: #ebf8ff;
  border-color: #90cdf4;
}

第二步：调整分页容器的布局 #

你之前用的内联样式可以简化，把位置控制的样式放到CSS里更易维护。比如把分页代码改成这样：

<div class="pagination-wrapper">
    {{ $t->links() }}
</div>

然后在CSS里添加容器的位置样式（根据你的需求调整）：

.pagination-wrapper {
  margin-top: 30px;
  /* 如果还是需要绝对定位的话：
  position: absolute;
  top: 300px;
  left: 20px;
  */
}

可选：自定义分页HTML结构（进阶） #

如果想要完全控制分页的HTML结构，Laravel 5.2允许你自定义分页视图：

1. 在resources/views下创建pagination/custom.blade.php文件，写入你想要的HTML结构（可基于上面的CSS调整标签类名）
2. 调用分页时指定这个视图：

{{ $t->links('pagination.custom') }}

这样一来，你的分页就会变成水平排列的优雅样式，完全不依赖Bootstrap啦！

内容的提问来源于stack exchange，提问作者Don'tDownvoteMe