使用 Bootstrap 3.2.0 将多个按钮居中对齐

Question

我知道这个问题被问过很多关于居中按钮或 div 的问题，但我找不到多个按钮/div 的答案。

我的设计中有几个部分需要 2 或 3 个按钮居中对齐，它们之间的边距为 10 像素，我还要求它们跨越 2 列。我将在下面粘贴我正在使用的代码，希望你们中的某个人能告诉我我在哪里犯了错误，在此先感谢。

<div class="container">
        <div class="row">
            <div class="col-lg-2 col-lg-offset-3 sec-1-btn">More</div>
            <div class="col-lg-2 sec-1-btn">More</div>
            <div class="col-lg-2 sec-1-btn">More</div>
        </div>
    </div>

@mixin btns {
    background: $yellow;
    color: $cream;
    font-weight: 700;
    font-size: 1.3em;
    text-transform: uppercase;
    text-align: center;
    padding: 12px 0;
}

我尝试在按钮上添加一个 margin-right: 10px 但由于第一个被卡在它的位置，它们没有居中。我也尝试过使用 center-block 类，但似乎无法让它工作。我确定我不是唯一遇到此问题的人，可能只是我没有看到明显的问题。再次感谢您。

Answer 1

好吧，我有一个类似的问题，我需要两个按钮在页面顶部居中。由于这个问题，我只是把它放到一个按钮上（这样更容易）。由于我现在在三个按钮上遇到了同样的问题，所以我无法将它们降为一个，所以我恢复到导致我出现问题的两个原始按钮并想出了这个......

<div class="row start-btns">
    <div class="col-lg-6 col-lg-offset-3 test">
        <div class="row">
            <div class="col-lg-5 pull-left start-btn">Get Started</div>
            <div class="col-lg-5 pull-right tour-btn">Tour The Site</div>
        </div>
    </div>
</div> <!-- End .row .start-btns -->

@mixin btns {
    background: $yellow;
    color: $cream;
    font-weight: 700;
    font-size: 1.3em;
    text-transform: uppercase;
    text-align: center;
    padding: 12px 0px;
}

.call-btn, .start-btn, .tour-btn {
        @include btns;
    }

    .start-btn {
        margin-right: 1em;
    }

让父“.test”跨越 6 列并居中允许我嵌套另一行，其中两个按钮跨越 5 列（实际上是 3 列由于嵌套）并向左拉另一个右。这给出了两个按钮跨越 3 列并以 10 像素间距完美居中的效果。

Answer 2

使用 Bootstrap 的 text-center 类..

<div class="container">
  <div class="row">
    <div class="col-lg-2 col-lg-offset-3 sec-1-btn text-center">More</div>
    <div class="col-lg-2 sec-1-btn text-center">More</div>
    <div class="col-lg-2 sec-1-btn text-center">More</div>
  </div>
</div>

http://www.bootply.com/cK0rmAOcXR