html - 网格和 Bootstrap 分页

Question

我正在使用 boostrap 网格和分页，我需要得到下面我在图片中向您展示的结果:

标签和分页需要向右对齐，因为我正在尝试使用我的代码。我无法使它像图像一样对齐和酷炫。

有人可以帮忙吗？

<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="col-md-2 col-md-offset-7">
  <label>Page 1 of 3</label>
</div>
<div class="col-md-3">
  <ul class="pagination">
  <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>
</ul>
</div>
<h1>
need get this result
</h1>
<img src="https://i.imgur.com/eJplxch.jpg">

Answer 1

我不建议依赖网格来实现此解决方案；您永远不知道何时必须显示 Page 1 of 1 或 Page 1 of 72,386,104。更好的方法是将标签和分页放在同一列中，但这将需要在 Bootstrap 3.x 中进行一些额外的类声明(注意:从字面上看，此解决方案中的所有内容都可以使用 Bootstrap 4 中的 native 类来完成) .

.d-inline-block {
  display: inline-block;
  vertical-align: middle;
}
  
.pagination-label {
  margin-right: 10px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12 text-right">
      <strong class="pagination-label d-inline-block">Page 1 of 3</strong>
 
      <div class="d-inline-block">
        <ul class="pagination">
        <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>
        </ul>
      </div>
  </div>
</div>

将 display: inline-block 应用于标签和分页(作为包装元素)会使两者水平对齐。 vertical-align 声明将使标签文本相对于分页居中。

pagination-label 只是应用了一个小的右边距凸起，所以一切都不会被压在一起。

这种方法的一个优点是您可以轻松地调整整个事物与原生类的对齐方式，例如 text-left、text-center 或(在这个例子的情况)text-right.