Question

我正在使用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

Answer 1

我无法保证这会对您的特定用例有效（因为我没有亲自尝试过，而且我不确切知道您使用的是什么标记和CSS），但这确实可行你的jsFiddle演示：

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

Answer 2

jsFiddle solution

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

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

在bootstrap.css中：

.input-mini {
    width: 60px;
}

你的personal-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中修复的。使用bootstrap类“pull-right”

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

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

调整浮动内容

3 个答案: