Twitter bootstrap 在不同设备中水平对齐按钮

我正在尝试使用CSS水平对齐按钮。以下是我的标记：

<div class="modal-footer">
<div class="col-xs-8 footer-message"></div>
<div class="col-xs-4 footer-controls">
  <button class="btn btn-primary" ng-click="savePrompt.close()">Cancel</button>
  <button class="btn btn-primary" ng-click="savePrompt.go()">Abandon Changes</button>
</div>

试着这样做

取消
放弃改变

尝试这样做

取消
放弃改变

请演示您当前拥有的功能。发布编译后的CSS比使用LESS.Dirty方式更好，但是我能够通过将类col-xs-4更改为col-xs-12进行修复，这很好。您可以将其作为答案发布。请对您当前拥有的内容进行演示。发布编译后的CSS比使用LESS.Dirty方式更好，但是我能够通过将类col-xs-4更改为col-xs-12进行修复，这很好。你可以把它贴出来作为答案。

    .modal-footer {
  padding: @modal-inner-padding;
  border-top: 1px solid @modal-footer-border-color;
  background: #000000;
  color: white;
    .footer-message{
        font-size: 2rem;
    }
    .footer-controls{
        text-align: right;
    }

    &:extend(.clearfix all); // clear it in case folks use .pull-* classes on buttons

  // Properly space out buttons
  .btn + .btn {
    margin-left: 5px;
    margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs
  }
  // but override that for button groups
  .btn-group .btn + .btn {
    margin-left: -1px;
  }
  // and override it for block buttons as well
  .btn-block + .btn-block {
    margin-left: 0;
  }
}