对齐浮动内容

Question

我正在使用 Twitter Bootstrap 工具包 来设计我的网站。我正在实现一个带有类似于以下标记的拆分按钮下拉菜单。

<div class="btn-group">
    <a class="btn btn-small btn-info" href="#">
        Add New Provider
    </a>
    <a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#">
        <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
        <li><a href="#">...</a></li>
        <li><a href="#">...</a></li>
    </ul>
</div>

这按预期工作；但是，我想将整个按钮向右对齐。但是 btn-group 和 btn 类都向左浮动，因此任何文本对齐方式都会被忽略。

如果我知道按钮的总宽度，我可以将外部

设置为该宽度，并在父 中对齐整个

。但我不知道总宽度。

有没有什么方法可以将这些内容向右对齐，而无需重新设计底层 Bootstrap 类？

注意：我已经发布了 jsFiddle 演示

Answer 1

我不能保证这适用于您的特定用例（因为我还没有亲自尝试过，而且我不知道您正在使用什么标记和 CSS），但这确实适用于您的 jsFiddle 演示:

.panel-container {
    display: inline-block;
    text-align: right;
}

Answer 2

jsFiddle 解决方案

我建议使用左/右 padding 而不是使用 text-align，尽管两者仍然有效，无论它们是否浮动。重要的是它们的宽度被声明为 width: auto。

如果您不想修改核心 Bootstrap 文件，则可以在单独的样式表中使用相同的类并覆盖 Bootstrap 中的样式。只需确保在 Bootstrap 之后调用单独的个人样式表即可。例如...

在 bootstrap.css 中：

.input-mini {
    width: 60px;
}

在您的 individual-stylesheet.css 中：

/* Redefine the same style
   declared in Bootstrap */

.input-mini {
    width: 40px;
} 

在您的标头中：

<link rel="stylesheet" type="text/css" href="bootstrap.css" />
<link rel="stylesheet" type="text/css" href="personal-stylesheet.css" />

Answer 3

这个问题已在 bootstrap 2.0.2 中修复。使用引导类“pull-right”

https://github.com/twitter/bootstrap/issues/ 2045

http://jsbin.com/ebemiz/2/edit#html,live