在面板内时无法右对齐 twitter bootstrap 分页小部件答案

【问题标题】：Cannot right align twitter bootstrap pagination widget when inside a panel在面板内时无法右对齐 twitter bootstrap 分页小部件
【发布时间】：2014-09-10 22:30:18
【问题描述】：

我已经定义了一个面板，我想在其中添加一个右对齐的分页。

我尝试使用 text-align 属性，将 margin-left 和 margin-right 设置为 auto，但它们似乎都不起作用。也试过float：对，但随后分页掉出面板

这是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/

【问题讨论】：

“从面板中掉出”是什么意思？它在 Mac Chrome 上的 JSFiddle 中看起来不错。
面板关闭，没有内容，分页出现在其中。在elementaryOS 上用chromium 34 和firefox 30 测试过
您能否在您的 JSFiddle 演示中重现该行为？

标签： css twitter-bootstrap-3 css-float alignment text-align

【解决方案1】：

看着这个问题：https://stackoverflow.com/a/9184443/47633，我发现了 text-center 和 text-right 引导类。

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

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

不知道有没有更好的办法

【讨论】：

【解决方案2】：

我认为这只是一个解决方案。不知道是不是更好。

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

【讨论】：