Bootstrap布局有问题

Question

我正在尝试在同一行上设置两个按钮的样式。在较大的设备上，我希望每个按钮占据显示器的三分之一。在小型设备上，我希望每个按钮占据整个显示屏的一半。

但是当我这样做时，按钮不是很均匀。 （一个略低于第一个）。

这是我的标记。

<div class="row" style="margin-top: 12px">
    <div class="col-sm-6 text-center">
        <a id="prev-question" href="#" class="btn btn-success col-xs-6 col-sm-4 col-sm-offset-4">Previous</a>
    </div>

    <div class="col-sm-6 text-center">
        <a id="next-question" href="#" class="btn btn-success col-xs-6 col-sm-4 col-sm-offset-4 disabled">Next</a>
    </div>
</div>

有人可以帮我一点吗？

更新

为了更好地阐明我正在尝试的布局，下图大致显示了微型设备（顶部）和更大设备（底部）的布局。 （它不一定是这个，但因为较小的设备有较小的屏幕，我希望这些设备上的按钮更大。）

此外，我怀疑我看到的问题可能与按钮之间没有边距这一事实有关。

Answer 1

首先使用.container作为父级，然后使用xs代替sm，因为xs适用于超小型设备。

.row {
  margin-top: 12px;
  border: red solid
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-xs-6 text-center">
      <a id="prev-question" href="#" class="btn btn-success col-xs-12 col-md-4 col-md-offset-4">Previous</a>
    </div>

    <div class="col-xs-6 text-center">
      <a id="next-question" href="#" class="btn btn-success col-xs-12 col-md-4 col-md-offset-2">Next</a>
    </div>
  </div>
</div>

Answer 2

您可以将按钮放在这样的嵌套网格列中。

<div class="row " style="margin-top: 12px">
    <div class="col-xs-6 text-center">
        <div class="row">
            <div class="col-xs-12 col-md-4 col-md-offset-4">
                <a id= "prev-question" href="#" class="btn btn-success btn-block">Previous</a>
            </div>
        </div>
    </div>
    <div class="col-xs-6 text-center">
        <div class="row">
            <div class="col-xs-12 col-md-4 col-md-offset-3">
                <a id="next-question" href="#" class="btn btn-success  btn-block">Next</a>
            </div>
        </div>
    </div>
</div>

http://www.codeply.com/go/kjjp1Ei1GM