不同设备中的水平对齐按钮答案

【问题标题】：Horizontally align button in different devices不同设备中的水平对齐按钮
【发布时间】：2016-02-18 20:47:03
【问题描述】：

我正在尝试使用 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。

然而它在桌面上是正确对齐的，但在 iPad 和 Android 手机中，按钮是一个接一个。

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

【问题讨论】：

请做一个你目前拥有的演示。发布编译后的 CSS 比 LESS 更好。
肮脏的方式，但我能够通过将类 col-xs-4 更改为 col-xs-12 来修复
那很好。您可以将其发布为答案。

标签： twitter-bootstrap css less

【解决方案1】：

尝试这样做

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

【讨论】：