Question

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

Answer 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>

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

1 个答案: