分页 CSS 样式（引导程序）答案

【问题标题】：Pagination CSS style (Bootstrap)分页 CSS 样式（引导程序）
【发布时间】：2017-11-24 08:43:43
【问题描述】：

我使用引导分页样式，但我不知道为什么它不能正常工作（它粘在左边，有些部分比其他部分低）。这是我的代码：

<section class="admin" id="admin-products">
  <div>
    <ul ng-if="orders.pager.pages.length" class="pagination">
        <li ng-class="{disabled:orders.pager.currentPage === 1}">
            <a ng-click="orders.setPage(1)">First</a>
        </li>
        <li ng-class="{disabled:orders.pager.currentPage === 1}">
            <a ng-click="orders.setPage(orders.pager.currentPage - 1)">Previous</a>
        </li>
        <li ng-repeat="page in orders.pager.pages" ng-class="{active:orders.pager.currentPage === page}">
            <a ng-click="orders.setPage(page)">{{page}}</a>
        </li>               
        <li ng-class="{disabled:orders.pager.currentPage === orders.pager.totalPages}">
            <a ng-click="orders.setPage(orders.pager.currentPage + 1)">Next</a>
        </li>
        <li ng-class="{disabled:orders.pager.currentPage === orders.pager.totalPages}">
            <a ng-click="orders.setPage(orders.pager.totalPages)">Last</a>
        </li>
    </ul>
  </div>
</section>

在我的项目中，还有其他 CSS 文件，我不知道是哪一个可能导致此问题。分页是这样的：

我认为 li 标签有问题。例如，当我为第一个 li 设置绿色背景颜色时，它看起来像这样（背景出现在右侧。）：

示例代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  </head>
  <body>
    <style>
      .admin {
      width: 100%;
      max-width: 1060px;
      margin: auto;
      padding-top: 150px;
      padding-bottom: 500px;
      direction: rtl;
      text-align: right; 
      }
      .admin .navigation {
      text-align: center;
      margin: auto;
      display: inline-block;
      padding: 15px;
      border-bottom: 1px solid #c1c1c1;
      margin-bottom: 40px; }
      .admin .navigation a {
      text-decoration: none;
      color: #8e8e8e;
      cursor: pointer;
      font-weight: 300;
      font-size: 12px; }
      .admin .navigation a.active {
      color: #5C5C5C;
      font-weight: 700; }
      .admin .navigation span {
      color: #9B9B9B;
      padding: 10px; }
      .admin table {
      width: 100%;
      direction: rtl;
      border: 1px solid #ebecf0;
      text-align: center; }
      .admin table thead {
      background: #f8fafc;
      color: #8291a6;
      border-bottom: 1px solid #ebecf0;
      font-size: 10px; }
      .admin table thead th {
      padding: 7px 0; }
      .admin table tbody {
      font-size: 12px;
      color: #616161; }
      .admin table tbody tr {
      background: white;
      border-bottom: 1px solid #ebecf0; }
      .admin table tbody tr td {
      font-size: 11px;
      font-weight: 300;
      vertical-align: middle;
      padding: 5px; }
      .admin table tbody tr td .name {
      display: inline-block;
      padding-right: 10px; }
      .admin table tbody tr td .photo {
      width: 50px;
      vertical-align: middle; }
      .admin h1 {
      font-size: 30px;
      line-height: 1.5; }
      .admin h3 {
      font-size: 18px;
      line-height: 1.5;
      display: inline-block;
      margin-right: 10px; }
      .admin select {
      font-size: 15px;
      height: 38px; }
      .admin label {
      display: block;
      margin: 10px; }
      .admin input[type=text] {
      display: inline-block;
      border: 0px;
      line-height: 20px;
      margin: 10px 0px;
      font-size: 15px;
      padding: 7px 5px;
      width: 400px;
      font-family: IRANSans ,'PT Sans', sans-serif !important; }
      .admin button {
      border: 0;
      margin: 10px 0;
      border-radius: 5px;
      color: #fff;
      font-size: 15px;
      padding: 5px 10px;
      font-weight: 300; }
      .admin button.green {
      background: #8BC34A; }
      .admin button.red {
      background: #F44336;
      font-size: 13px; }
      .admin .submission {
      direction: ltr;
      text-align: left;
      line-height: 2;
      background: #fff;
      padding: 10px; }
      .admin .submission ul {
      margin-bottom: 100px; }
      .admin .submission ul li {
      font-size: 13px; }
      .admin .submission ul li span {
      background: #282828;
      color: #fff;
      padding: 0px 11px;
      margin-right: 10px;  }
    </style>
    <section class="admin persion" id="admin-products">
      <div>

        <ul ng-if="orders.pager.pages.length" class="pagination">

          <li ng-class="{disabled:orders.pager.currentPage === 1}">
                            <a ng-click="orders.setPage(1)">First</a>

          </li>

          <li ng-class="{disabled:orders.pager.currentPage === 1}">
                            <a ng-click="orders.setPage(orders.pager.currentPage - 1)">Previous</a>

          </li>

          <li ng-repeat="page in orders.pager.pages" ng-class="{active:orders.pager.currentPage === page}">
                            <a ng-click="orders.setPage(page)">{{page}}</a>

          </li>


          <li ng-class="{disabled:orders.pager.currentPage === orders.pager.totalPages}">
                            <a ng-click="orders.setPage(orders.pager.currentPage + 1)">Next</a>

          </li>

          <li ng-class="{disabled:orders.pager.currentPage === orders.pager.totalPages}">
                            <a ng-click="orders.setPage(orders.pager.totalPages)">Last</a>

          </li>

        </ul>
      </div>
    </section>
  </body>
</html>
<script>
  $scope.orders = {
    pager: {
        currentPage:1,
        endIndex:29,
        endPage:4,
        pageSize:30,
        pages: [1,2,3,4],
        length:4,
        startIndex:0,
        startPage:1,
        totalItems:100,
        totalPages:4
    }
  }
</script>

【问题讨论】：

不，您没有看到为 li 指定的背景颜色仅仅是因为内部的 a 元素具有由引导程序指定的自己的背景颜色，并且li 没有任何实际尺寸，因为其中的链接是浮动的。
@CBroe：在引导程序的其他示例中，我看不到 li 背景，但正如您在第二张图片中看到的那样，绿色背景显示在右侧。那是错的，对吧？
是的，这看起来很不对劲。我首先在 DOM 检查器中检查从您的 HTML（以及无论是什么 - Angular 或类似的东西）创建的结构是否实际上是正确的，并且与引导站点上的示例相匹配.
@CBroe：我查过了。我什至禁用了几乎所有的 CSS 属性，但它不起作用。
不，我不知道。它只显示了五个元素，中间的一个显然是{{page}}，在一行上都很好看。

标签： html css twitter-bootstrap pagination

【解决方案1】：

感谢CBore，我明白了！问题是一些非字符串字符没有显示在页面上，但迫使一些标签低于我的预期。在 Edge 浏览器中，页面是这样的：

【讨论】：