如何使用Bootstrap将按钮对齐到中心

Question

我使用Bootstrap创建了一个tile.在瓷砖内部,靠近底部我想要瓷砖的三个按钮(开始,中间和结束).

我制作了开始和结束按钮但是使用了两个div标签pull-left和pull-right类.现在我想要的是放置中间按钮.

这是我的代码的一部分和截图:

<div class="col-lg-12">
    <div class="pull-left">
        <button class="btn btn-primary btn-sx" type="button">Confirm</button>
    </div>

    <!-- I want another button here, center to the tile-->

    <div class="pull-right">
        <button class="btn btn-primary btn-xs pull-right" type="button">Decline</button>
    </div>
</div>

Answer 1

使用此选项:

  <div class="text-center"><button class="btn btn-primary btn-sx" type="button">Confirm</button></div>

Answer 2

一个Bootstrap最强大的功能是嵌套row元素.每个col-*容器都可以row在其中包含另一个容器,然后提供另一组12个col空格:

<div class="col-lg-12">
    <div class="row">
        <div class="col-xs-4">
            <button class="btn btn-primary btn-sx" type="button">Confirm</button>
        </div>
        <div class="col-xs-4">
            <button class="btn btn-primary btn-xs" type="button">Middle Button</button>
        </div>
        <div class="col-xs-4">
            <button class="btn btn-primary btn-xs" type="button">Decline</button>
        </div>
    </div>
</div>

我不确定你的pull-*类是如何工作的,但是使用Bootstrap的内置网格系统你应该能够摆脱它们.

不要错过嵌套列上的Bootstrap指南,因为它提供了比此答案更多的信息.