Question

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

标签和分页需要与右侧对齐，因为我现在正在尝试使用我的代码。我不能让它像图像那样对齐和冷却。

有人可以帮忙吗？

＆＃13;

<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">

＆＃13;

Answer 1

我不建议依赖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

Answer 2

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

这是JSFiddle example。

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

网格和引导分页

2 个答案: