对齐浮动内容答案

【问题标题】：Aligning Floated Content对齐浮动内容
【发布时间】：2012-06-27 03:05:23
【问题描述】：

我正在使用Twitter Bootstrap toolkit 来设置我的网站的样式。我正在实现一个拆分按钮下拉菜单，其标记类似于以下内容。

<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 类都向左浮动，因此任何文本对齐都会被忽略。

如果我知道按钮的总宽度，我可以将外部<div> 设置为该宽度，并在父<div> 中对齐整个<div>。但我不知道总宽度。

有什么方法可以在不修改底层 Bootstrap 类的情况下将此内容向右对齐？

注意：我已经发布了jsFiddle demo

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

jsFiddle solution

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

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

在 bootstrap.css 中：

.input-mini {
    width: 60px;
}

在您的个人样式表.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" />

【讨论】：

我在这之后遇到了一些麻烦，因为您重新排列了标记，但您似乎正在更改内部的底层类。由于这些是由 Twitter Bootstrap 团队维护的，所以我表示我想避免这种情况。
updated jsFiddle solution 这就是你想要的吗？如有必要，请随意重命名.container。
不幸的是，没有。看来您仍在修改内部底层<div>s 的样式。虽然这有点尴尬，因为由于标记更改，我需要在原始示例之间来回切换。
我想我不明白你在问什么。 CSS 不会干扰 Bootstrap。选择器.container .btn 将其样式限制为.btns 内.container，这意味着在整个站点中实现它是安全的。在上面的示例中，我唯一设置样式的 div 是 .container，这是完全可定制的。
我使用your originally posted jsFiddle 的类名创建了an updated jsFiddle。我已经删除了不必要的代码以减少混乱。

【解决方案3】：

这已在引导程序 2.0.2 中修复。使用引导类“pull-right”

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

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

【讨论】：