bootstrap分页页码的位数导致宽度变化

遇到问题的现象描述

我使用 bootstrap v3.x 作为前端，当使用其 pagination 组件作为分页时，发现 ul 的宽度或者说每个页码的宽度会因为页码位数的不同而导致宽度产生变化，请问这个怎么处理？
如图所示（此为在 RunOOB.com 上运行效果）：
（1）当页码为1-10时；
（2）当页码翻页到有多个双位数参与进来时；
（3）当页码翻页到有多个三位数参与进来时；

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>Bootstrap 实例 - 默认的分页</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<ul class="pagination">
    <li><a href="#">&laquo;</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="#">6</a></li>
    <li><a href="#">7</a></li>
    <li><a href="#">8</a></li>
    <li><a href="#">9</a></li>
    <li><a href="#">10</a></li>
    <li><a href="#">&raquo;</a></li>
</ul>
<p>
<ul class="pagination">
    <li><a href="#">&laquo;</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">6</a></li>
    <li><a href="#">7</a></li>
    <li><a href="#">8</a></li>
    <li><a href="#">9</a></li>
    <li><a href="#">10</a></li>
    <li><a href="#">11</a></li>
    <li><a href="#">12</a></li>
    <li><a href="#">13</a></li>
    <li><a href="#">14</a></li>
    <li><a href="#">&raquo;</a></li>
</ul>
<p>    
<ul class="pagination">
    <li><a href="#">&laquo;</a></li>
    <li><a href="#">94</a></li>
    <li><a href="#">95</a></li>
    <li><a href="#">96</a></li>
    <li><a href="#">97</a></li>
    <li><a href="#">98</a></li>
    <li><a href="#">99</a></li>
    <li><a href="#">100</a></li>
    <li><a href="#">101</a></li>
    <li><a href="#">102</a></li>
    <li><a href="#">103</a></li>
    <li><a href="#">&raquo;</a></li>
</ul>
    
</body>
</html>

不用处理，非要处理，就写css覆盖一下样式，不过如果页数太多的时候写死宽度可能导致样式错乱

这种怎么处理，人家太胖也挤不下啊

用CSS的width属性来设置.pagination的宽度给个固定宽度不过这样得话样式可能会飞

.pagination {
    width: 200px; /* 设置你想要的宽度 */
    display: flex;
    justify-content: center;
}

也可以隐藏多余的页码，譬如固定只显示10条，其他隐藏之类的
用CSS的overflow属性来隐藏超出容器的页码


.pagination {
    overflow: hidden;
}
或者用CSS的:nth-child选择器来设置只显示前x个页码
.pagination-page:nth-child(n+11) {
    display: none;
}

不知道你这个问题是否已经解决, 如果还没有解决的话:

这篇文章：bootstrap中，使用Pagination处理前后端分页也许有你想要的答案，你可以看看
除此之外, 这篇博客: 如何bootstrap的分页插件的颜色中的 一、首先找到使用分页的地方，并找到id为 pagination 的 ul： 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
```
  
  <ul id="pagination"></ul>
```

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^