Laravel分页活动页面显示不带样式

Question

我正在通过-> render（）或-> links（）方法使用Laravel分页。一切都很好，唯一的问题是我当前的活动页面，没关系是第一个，第二个页面还是最后一个页面，如果是活动页面，则样式无法正常工作。这是我的问题的一个例子。

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

我发现了以下样式：

c:\Program Files (x86)\Google\Chrome\Application>chrome.exe "http://myhadoop-m:8088" --proxy-server="socks5://localhost:10000" --host-resolver-rules="Map * 0.0.0.0 , EXCLUDE localhost" --user-data-dir=/tmp/myhadoop-m

这是.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()

可能是什么问题？

Answer 1

使用我的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; }

Answer 2

我也有同样的问题。但是我已经将自定义CSS添加到具有自己样式的样式锚标记中。原来我的CSS干扰了它，所以，我评论了我所有的锚标记样式，并且成功了！ 因此，（就我而言）解决方案是，不要使用标签名称在CSS中编写任何样式，而应使用ID或Classs来实现此目的。 现在，我要在导航栏中定位所需的锚标签：

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

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