Question

我已经定义了一个面板，在其中我想添加一个分页权限。

我尝试使用text-align属性，将margin-left和margin-right设置为auto，但它们似乎都不起作用。也尝试使用float：right，但然后分页不属于小组

这是html代码：

<div class="container-fluid theme-showcase" role="main">

  <div class="row">

    <div class='panel panel-default'>
      <div class="panel-heading">My panel with text-align (nothing happens)</div>

      <ul class="pagination">
        <li class="disabled"><a href="#">&laquo;</a></li>
        <li class="active"><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">&raquo;</a></li>
      </ul>

    </div> <!-- /panel panel-default -->

  </div>

这是我尝试过的事情

<style>
  ul#aligned {
    text-align: right;
  }
  ul#auto-margin {
    margin-left: auto;
    margin-right: auto;
  }
  ul#floated {
    float: right;
  }
</style>

这里有一个显示问题的工作小提琴：http://jsfiddle.net/opensas/BfuPc/2/

Answer 1

看看这个问题：https://stackoverflow.com/a/9184443/47633，我发现了文本中心和文本权限引导类。

解决方案似乎是用div.text-right包围ul.pagination。

此外，text-align：right设置在应用于封闭div时有效，但不适用于ul本身。

我想知道是否有更好的解决方案

Answer 2

我认为这只是一个解决方案。不确定它是否更好。

.panel{
direction: rtl;
}
.panel *{
direction: ltr;
}

在面板内部无法正确对齐twitter bootstrap分页小部件

2 个答案: