时间戳

首页 > 解决方案 > Laravel 分页活动页面出现无样式

css - Laravel 分页活动页面出现无样式

问题描述

我正在使用带有->render() 或 ->links()方法的 Laravel 分页。一切都很好，唯一的问题是我当前的活动页面，不管是第一个，第二个还是最后一页，如果是活动页面，样式就不能正常工作。这是我的问题的一个例子。

问题

搜索我的问题的解决方案，我可以看到所选页码已添加并添加了“活动”类。搜索我的 css 文件（来自 coreui 免费模板）

我发现了以下样式：

.page-item.active .page-link, 
.pagination-datatables li.active .page-link, 
.pagination li.active .page-link, 
.page-item.active .pagination-datatables li a, 
.pagination-datatables li .page-item.active a, 
.pagination-datatables li.active a, 
.page-item.active .pagination li a, 
.pagination li .page-item.active a, 
.pagination li.active a {
    z-index: 2;
    color: #fff;
    background-color: #20a8d8;
    border-color: #20a8d8; 
}

render()这是我的函数的 HTML 输出：

<ul class="pagination">
    <li><a href="http://localhost:8000/productos?page=1" rel="prev">&laquo;</a></li>
    <li><a href="http://localhost:8000/productos?page=1">1</a></li>
    <li class="active"><span>2</span></li>
    <li><a href="http://localhost:8000/productos?page=3">3</a></li>
    <li><a href="http://localhost:8000/productos?page=3" rel="next">&raquo;</a></li>
</ul>

可能是什么问题呢？

标签： csslaraveltwitter-bootstraplaravel-pagination

解决方案

我也有同样的问题。但是我已经添加了我的自定义 CSS 以使用我自己的样式设置锚标记。事实证明我的 CSS 干扰了它，所以我评论了我所有的锚标签样式并且它起作用了！因此，（在我的情况下）解决方案是，不要使用标签名称在 CSS 中编写任何样式，而是为此目的使用 ID 或类。现在要在导航栏中定位所需的锚标签，我正在这样做：

#mynav a {
   color: white;
   text-decoration: none;
   font-size: 1.3rem;
   font-weight: bold;
}

这样它就不会干扰页面上的任何其他锚标记。

推荐阅读