Laravel 分页活动页面出现无样式
Laravel pagination active page appears without style
我正在使用 Laravel 分页和 ->render() 或 ->links() 方法。一切都很好,唯一的问题是我当前的活动页面,不管是第一页、第二页还是最后一页,如果是活动页面,样式将无法正常工作。这是我的问题的一个例子。
在搜索我的问题的解决方案时,我可以看到已选择的页码已添加 "active" class。搜索我的 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;
}
这是 HTML 输出我的 render()
函数:
<ul class="pagination">
<li><a href="http://localhost:8000/productos?page=1" rel="prev">«</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">»</a></li>
</ul>
可能是什么问题?
使用我的 css 文件并使用@fubar 评论我找到了解决方案。我所做的是:
我改这个:
.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;
}
为此:
.page-item.active .page-link,
.pagination-datatables li.active .page-link,
.pagination li.active .page-link,
**.pagination li.active span,** --Added line
.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;
}
然后我添加了这个样式:
.page-link, .pagination-datatables li a, .pagination li a, .pagination span {
position: relative;
display: block;
padding: 0.5rem 0.75rem;
margin-left: -1px;
line-height: 1.25;
color: #20a8d8;
background-color: #fff;
border: 1px solid #ddd; }
我也遇到了同样的问题。但是我已经添加了我的自定义 CSS 来使用我自己的样式来设置锚标签的样式。结果是我的 CSS 干扰了它,所以我评论了我所有的锚标签样式并且它起作用了!
因此,(在我的例子中)解决方案是,不要使用标签名称在 CSS 中编写任何样式,而是为此目的使用 ID 或 类。
现在要在导航栏中定位所需的锚标记,我正在这样做:
#mynav a {
color: white;
text-decoration: none;
font-size: 1.3rem;
font-weight: bold;
}
这样它就不会干扰页面上的任何其他锚标记。
我正在使用 Laravel 分页和 ->render() 或 ->links() 方法。一切都很好,唯一的问题是我当前的活动页面,不管是第一页、第二页还是最后一页,如果是活动页面,样式将无法正常工作。这是我的问题的一个例子。
在搜索我的问题的解决方案时,我可以看到已选择的页码已添加 "active" class。搜索我的 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;
}
这是 HTML 输出我的 render()
函数:
<ul class="pagination">
<li><a href="http://localhost:8000/productos?page=1" rel="prev">«</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">»</a></li>
</ul>
可能是什么问题?
使用我的 css 文件并使用@fubar 评论我找到了解决方案。我所做的是:
我改这个:
.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;
}
为此:
.page-item.active .page-link,
.pagination-datatables li.active .page-link,
.pagination li.active .page-link,
**.pagination li.active span,** --Added line
.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;
}
然后我添加了这个样式:
.page-link, .pagination-datatables li a, .pagination li a, .pagination span {
position: relative;
display: block;
padding: 0.5rem 0.75rem;
margin-left: -1px;
line-height: 1.25;
color: #20a8d8;
background-color: #fff;
border: 1px solid #ddd; }
我也遇到了同样的问题。但是我已经添加了我的自定义 CSS 来使用我自己的样式来设置锚标签的样式。结果是我的 CSS 干扰了它,所以我评论了我所有的锚标签样式并且它起作用了! 因此,(在我的例子中)解决方案是,不要使用标签名称在 CSS 中编写任何样式,而是为此目的使用 ID 或 类。 现在要在导航栏中定位所需的锚标记,我正在这样做:
#mynav a {
color: white;
text-decoration: none;
font-size: 1.3rem;
font-weight: bold;
}
这样它就不会干扰页面上的任何其他锚标记。