對齊浮動內容

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類都向左浮動，因此忽略任何文本對齊方式。

如果我知道按鈕的總寬度，則可以將外部<div>設置為該寬度，然后將整個<div>對准父級<div> 。 但是我不知道總寬度。

有什么辦法可以在不重新構造底層Bootstrap類的情況下使此內容與右側對齊？

注意：我已經發布了jsFiddle演示

Answer 1

這在bootstrap 2.0.2中已修復。 使用引導程序類“向右拉”

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

http://jsbin.com/ebemiz/2/edit#html，實時

Answer 2

我不能保證這會在您的特定用例上起作用（因為我自己沒有嘗試過，而且我不知道您使用的是哪種標記和CSS），但這確實在您的jsFiddle演示中起作用：

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

Answer 3

jsFiddle解決方案

我建議使用左/右padding而不是text-align ，盡管無論它們是否浮動，它們仍然可以工作。 重要的是它們的寬度被聲明為width: auto 。

如果您不想修改核心Bootstrap文件，則可以在單獨的樣式表中使用相同的類，並改寫Bootstrap中的樣式。 只需確保在Bootstrap之后調用單獨的個人樣式表即可。 例如...

在bootstrap.css中：

.input-mini {
    width: 60px;
}

在您的personalstylesheet.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" />