Question

假设我在容器中有以下Bootstrap分页：

  <ul class="pagination pull-right">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </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="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>

如果我将上面的代码包装在<div class="row"> ... </div>中，那么分页会更加正确，导致与其上方的表格不对齐。为什么会这样？

感谢。

Answer 1

那是因为.row的左右边距为-15px。

你应该添加.col-xx-xx作为.row的孩子，使用填充来抵消负边距。

示例：

<div class="row">
  <div class="col-sm-12">
    <ul class="pagination pagination-groups pull-right">
      <li>
        <a href="#" aria-label="Previous">
          <span aria-hidden="true">&laquo;</span>
        </a>
      </li>
      <li ng-repeat="i in range(tiGroupsData.total_pages) track by $index"><a href="#">{{$index+1}}</a></li>
      <li>
        <a href="#" aria-label="Next">
          <span aria-hidden="true">&raquo;</span>
        </a>
      </li>
    </ul>
  </div>
</div>

Class＆＃34; row＆＃34;在Bootstrap中使拉力更强

1 个答案: