Bootstrap网格与分页组件右对齐布局问题求助

看起来你想要实现页码标签和分页控件在同一行右侧整齐对齐的效果，原来的代码用了两个分离的列，容易导致垂直对齐不一致、布局不够紧凑的问题。这里给你两种可行的解决方案：

方案一：自定义CSS精确控制样式 #

这个方案灵活性更高，能精准匹配你的布局需求：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<style>
.page-info {
  display: inline-block;
  vertical-align: middle;
  margin-right: 15px;
  line-height: 34px; /* 匹配Bootstrap 3分页控件的默认高度 */
}
.pagination {
  display: inline-block;
  margin: 0; /* 移除分页控件默认的上下外边距，避免间距过大 */
}
</style>

<div class="container">
  <div class="row">
    <div class="col-md-12 text-right">
      <span class="page-info">Page 1 of 3</span>
      <ul class="pagination">
        <li><a href="#">1</a></li>
        <li class="active"><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">Next</a></li>
      </ul>
    </div>
  </div>
</div>

方案二：利用Bootstrap内置类快速实现 #

如果你不想写自定义CSS，可以借助Bootstrap的form-inline类自动处理元素的行内排列与垂直对齐：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col-md-12 text-right">
      <div class="form-inline">
        <label class="control-label">Page 1 of 3</label>
        <ul class="pagination">
          <li><a href="#">1</a></li>
          <li class="active"><a href="#">2</a></li>
          <li><a href="#">3</a></li>
          <li><a href="#">Next</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

核心思路说明： #

• 用text-right类让整个容器内的内容统一右对齐；
• 将页码标签和分页控件设置为inline-block（或借助form-inline的内置样式），确保它们在同一行显示；
• 通过vertical-align: middle或form-inline的默认样式实现垂直居中，保证视觉上的整齐度；
• 移除分页控件默认的上下外边距，避免和标签之间的间距失调。

内容的提问来源于stack exchange，提问作者raduken