Question

当我使用bootstrap（3.3.1）版本时。运行良好，我得到了这个结果。

当我使用最新版本（4.3.1）时，它可以工作，但我有此CSS结果

我的html代码

 <div class="col-md-12">
        <ul uib-pagination 
        ng-model="currentPage"
        total-items="totalItems"
        max-size="maxSize"  
        boundary-links="true">
      </ul>
</div>

我需要最新版本才能工作。

我使用angular-ui-bootstrap / 2.3.0

Answer 1

这是我的第一篇文章，我也对此问题已解决，以下问题也已解决，希望它能起作用，如果您必须更自动地执行此操作，请告诉我，问候！

<pre>

    [ul.pagination
    {
      border:solid 1px #CCCCCC;
      border-radius:5px;    
    }

    ul.pagination li.pagination-page 
    {
      border-right:solid 1px #CCCCCC;
      padding-left:15px;
      padding-right:15px;
    }

    li.pagination-page.ng-scope.active
    {
      background-color:#28a745;
    }

    li.pagination-page.ng-scope a
    {   
      color:#999;
    }


    li.pagination-page.ng-scope.active a
    {   
      color:#FFF;
      font-weight:bold;
    }

    ul.pagination li.pagination-prev
    {
      border-right:solid 1px #CCCCCC;
      padding:10px;
    }

    ul.pagination li.pagination-prev a
    {
      color:#F90;   
    }

    ul.pagination li.pagination-next
    {
      border-right:solid 1px #CCCCCC;
      padding:10px;
    }

    ul.pagination li.pagination-next a
    {
      color:#F90;   
    }

    ul.pagination li.pagination-first
    {
      border-right:solid 1px #CCCCCC;
      padding:10;       
    }

    ul.pagination li.pagination-first a
    {
      color:#F90;   
    }


    ul.pagination li.pagination-last
    {
      padding:10px;
    }

    ul.pagination li.pagination-last a
    {
      color:#F90;   
    }

    ul.pagination li
    {   
      padding:10px;
    }][1]

</pre>

Answer 2

最终解决方案，使用->修改ui-boostrap.min.js模板pagination.html。

在我的案例4.2.1中使用Css默认的boostrap

https://github.com/Morgul/ui-bootstrap4/blob/e44b6d6f2e3bd8396099b83eea29bd4086b78689/template/pagination/pagination.html

CSS样式不适用于ul-ub-pagination。 ui-bootstrap

2 个答案: