Question

我知道这个问题已经被问到很多关于按钮或div的中心问题，但我无法找到多个按钮/ div的答案。

我的设计中有几个部分要求2或3个按钮居中对齐，它们之间有10px的边距，我还要求它们跨越2个cols。我将以下代码粘贴到我正在使用的代码中，希望你们中的一个可以告诉我我犯了哪个错误，提前谢谢。

<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;
}

我尝试添加一个右边距：10px到按钮但是由于第一个卡在它的位置，它们没有居中。我也试过使用中心块类，但似乎无法使它工作。我确定我不是唯一遇到这个问题的人，可能我只是没有看到明显的问题。再一次，谢谢你。

Answer 1

使用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

Answer 2

好的，我有一个类似的问题，我需要在页面顶部居中的两个按钮。由于这个问题，我把它放到了一个按钮上（这样更简单）。由于我现在遇到了同样的问题，有三个按钮，我不能把它们放到一个，所以我回到原来的两个按钮，导致我出现问题，并提出了这个......

<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个cols并居中让我可以嵌套另一行，其中两个按钮跨越5个cols（实际上是3个由于嵌套）并向左拉一个，另一个向右拉。这样可以使两个按钮跨越3列，并以10px间距完美居中。

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

2 个答案: