Css 样式不适用于 ul uib-分页。 ui-bootstrap

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

这是我的第一个post，我也解决了这个问题，我已经解决了以下问题，我希望它有效，如果你需要更自动地完成它，请告诉我，问候!

<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修改为-->

使用 Css 默认的 boostrap ，在我的例子中是 4.2.1

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

Css 样式不适用于 ul uib-分页。 ui-bootstrap

Css style is not working for ul uib-pagination. ui-bootstrap

twitter-bootstrap

angular-ui-bootstrap