在元素中居中Bootstrap按钮组

Question

我正在尝试找出在一个元素中居中显示Bootstrap按钮组（即btn-group）的最佳方法。例如，如果您有以下内容：

<div id='toolbar'>
    <div class="btn-group">
        <button type="button" class="btn btn-default">Command1</button>
        <button type="button" class="btn btn-default">Command2</button>
    </div>
</div>

我该如何确保在工具栏（toolbar）中 btn-group 始终居中 (假设它适合)? 我想到的方法是: 我在btn-group 周围包裹一个div, 确定 btn-group 的宽度, 然后在包装器上设置该宽度和 margin:0 auto。但是，有两件事我不喜欢这种方法:

(1)它需要通过在包装器上设置边框并不断减小来找到正确的宽度，从而进行试错才能确定 btn-group 的确切宽度。

(2) 如果内容宽度仅变化了一像素(例如，按钮文本变化，或者因为字体设置而在不同的机器上看起来不同等)，那么它就不再居中，并且第二个按钮会掉到下一行。当然，你可以留出几个像素的余地，但这样两个按钮实际上就不能完全居中。

必须有更好的方法。你有什么想法吗？以下是我的方法(jsfiddle): HTML:

<div id='toolbar'>
    <div class='wrapper'>
        <div class="btn-group">
            <button type="button" class="btn btn-default">Command1</button>
            <button type="button" class="btn btn-default">Command2</button>
        </div>
    </div>
</div>

css:

#toolbar {
    width: 100%;
    max-width: 700px;
    margin: 10px;
    border: 1px solid black;
    padding: 10px;
}

#toolbar .wrapper {
    width: 197px;
    margin: 0 auto;
    /*border: 1px solid blue; used to test width*/
}

- EleventyOne

Answer 1

由于.btn-group是内联块，因此只需在容器上使用.text-center即可：fiddle

<div id='toolbar'>
    <div class='wrapper text-center'>
        <div class="btn-group">
            <button type="button" class="btn btn-default">Command1</button>
            <button type="button" class="btn btn-default">Command2</button>
        </div>
    </div>
</div>

- Adrift

---

这可能是更符合“Bootstrap”的方式。当然，本质上它是相同的解决方案。 - Blazemonger

Answer 2

由于按钮组使用了display: inline-block，将它们居中的正确方法是

#toolbar .wrapper {
    text-align: center;
}

这里有一个例子展示如何将样式应用于#toolbar并完全删除div.wrapper(具体根据工具栏中是否还有其他内容而定)。这里是更新后的示例代码。

- Blazemonger