Bootstrap 分页标签不显示CSS效果
 <nav aria-label="Page navigation">
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

图片说明
其余部分的标签都有显示。

 <!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="txt/html; charset=utf-8" /> 
<title>Lettiy</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"/>
<style>
.left{
    float:left;
    }
.right{
    float:right;
}
.rnav{
    height:80px;
    line-height:80px;
    }
.badge{
    background-color:teal;
    }
.interface{
        width:100px;
        height:100px;
        }
</style>
</head>
    <!-- 时间轴主体文章部分 -->
  <div class="col-md-10 left" style="padding:0;">
    <!--巨幕显示最新信息-->
    <div class="jumbotron">
        <h1>Welcome to Lettiy!</h1>
        <p>this is the demo test Page</p>
        <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
    </div>

    <!--文章显示区域
         采用表格形式进行填充-->
    <div class="container-fluid" style"margin-top:50px;">
        <table id="postView" style="width:100%;">
            <!--第一行-->
            <tr>
                <td class="col-md-3">
                    <div class="thumbnail">
                        <img src="img/java.png" alt="..."class="interface">
                        <div class="caption">
                            <h3>Thumbnail label</h3>
                            <p>Java is a general-purpose computer programming language that is concurrent, class-based, object-oriented,[14] and specifically designed to have as few impl...</p>
                            <p><a href="#" class="btn btn-primary" role="button">More</a></p>
                        </div>
                    </div>
                </td>

                <td class="col-md-3">
                    <div class="thumbnail">
                        <img src="img/java.png" alt="..."class="interface">
                        <div class="caption">
                            <h3>Thumbnail label</h3>
                            <p>Java is a general-purpose computer programming language that is concurrent, class-based, object-oriented,[14] and specifically designed to have as few impl...</p>
                            <p><a href="#" class="btn btn-primary" role="button">More</a></p>
                        </div>
                    </div>
                </td>

                <td class="col-md-3">
                    <div class="thumbnail">
                        <img src="img/java.png" alt="..."class="interface">
                        <div class="caption">
                            <h3>Thumbnail label</h3>
                            <p>Java is a general-purpose computer programming language that is concurrent, class-based, object-oriented,[14] and specifically designed to have as few impl...</p>
                            <p><a href="#" class="btn btn-primary" role="button">More</a></p>
                        </div>
                    </div>
                </td>

                <td class="col-md-3">
                    <div class="thumbnail">
                        <img src="img/java.png" alt="..."class="interface">
                        <div class="caption">
                            <h3>Thumbnail label</h3>
                            <p>Java is a general-purpose computer programming language that is concurrent, class-based, object-oriented,[14] and specifically designed to have as few impl...</p>
                            <p><a href="#" class="btn btn-primary" role="button">More</a></p>
                        </div>
                    </div>
                </td>
            </tr>

            <!--第二行-->
            <tr>
                <td class="col-md-3">
                    <div class="thumbnail">
                        <img src="img/php.png" alt="..."class="interface">
                        <div class="caption">
                            <h3>Thumbnail label</h3>
                            <p>Java is a general-purpose computer programming language that is concurrent, class-based, object-oriented,[14] and specifically designed to have as few impl...</p>
                            <p><a href="#" class="btn btn-primary" role="button">More</a></p>
                        </div>
                    </div>
                </td>
                <td class="col-md-3">
                    <div class="thumbnail">
                        <img src="img/php.png" alt="..."class="interface">
                        <div class="caption">
                            <h3>Thumbnail label</h3>
                            <p>Java is a general-purpose computer programming language that is concurrent, class-based, object-oriented,[14] and specifically designed to have as few impl...</p>
                            <p><a href="#" class="btn btn-primary" role="button">More</a></p>
                        </div>
                    </div>
                </td>

                <td class="col-md-3">
                    <div class="thumbnail">
                        <img src="img/php.png" alt="..."class="interface">
                        <div class="caption">
                            <h3>Thumbnail label</h3>
                            <p>Java is a general-purpose computer programming language that is concurrent, class-based, object-oriented,[14] and specifically designed to have as few impl...</p>
                            <p><a href="#" class="btn btn-primary" role="button">More</a></p>
                        </div>
                    </div>
                </td>
                <td class="col-md-3">
                    <div class="thumbnail">
                        <img src="img/php.png" alt="..."class="interface">
                        <div class="caption">
                            <h3>Thumbnail label</h3>
                            <p>Java is a general-purpose computer programming language that is concurrent, class-based, object-oriented,[14] and specifically designed to have as few impl...</p>
                            <p><a href="#" class="btn btn-primary" role="button">More</a></p>
                        </div>
                    </div>
                </td>

            </tr>

        </table>

        <!--分页器-->
        <div class="col-md-3 right">
        <nav aria-label="Page navigation">
            <ul class="pagination pagination-lg">
                <li>
                    <a href="#" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>

                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>

                <li>
                    <a href="#" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
            </ul>
        </nav>
        </div>

    </div>

  </div>
 <!--BootStrap jquery-->
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.bootcss.com/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>

</html>

图片说明

4个回答

其实你自己定义样式没太大关系的,不影响,但如果定义了一样的style的属性,实际上单单那个属性值你的会覆盖bootstrap里面的。我感觉是你ul里面的li和a标签没有定义class="page-item"(li标签),class="page-link"(a标签)

hanshou101
Jugg_VS_Spe_细节多到爆炸 说的非常正确!已尝试成功。
2 年多之前 回复

建议考虑样式覆盖和文件是否引入成功。这种问题通常是样式覆盖造成的

把你引入的样式去掉,只保留bootstrap的样式,在看下是不是正常了。

已尝试用boostrap3.3.7的就可以, 4.0新版本可能有改动

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问