网格和引导分页答案

【问题标题】：grid and bootstrap pagination网格和引导分页
【发布时间】：2018-07-11 23:18:45
【问题描述】：

我正在使用 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">

【问题讨论】：

标签： html css twitter-bootstrap pagination

【解决方案1】：

使用 flex-box 非常简单。将您的两个 cols 包装在父元素中。

这是JSFiddle example。

 .wrapper {
  display: flex;
  align-items: center;
}

【讨论】：

【解决方案2】：

我不建议使用 Grid 来解决此问题；你永远不知道什么时候必须显示Page 1 of 1 或Page 1 of 72,386,104。更好的方法是将标签和分页放在同一列中，但这将需要在 Bootstrap 3.x 中进行一些额外的类声明（注意：从字面上看，此解决方案中的所有内容都可以使用 Bootstrap 4 中的本机类来完成） .

.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。

【讨论】：