HTML Bootstrap - 在 Div 宽度的 50% 处显示两个按钮

Question

我有一个模态窗口需要在底部显示两个按钮，比如 Proceed 和 Cancel 使用 Bootstrap 的按钮。

我希望这些按钮并排占据 div 的整个宽度。

如果我将按钮的宽度设置为 50%，它们将一个显示在另一个之上。只有当我设置宽度时，比如 49%，它们才会彼此相邻显示，但它们不会占据整个宽度。

我已经见过很多次了，但不知道该怎么做。

这是我正在做的示例代码:

<div align="center">
    <button type="button" class="btn btn-warning" ng-click="Cancel()"  aria-haspopup="true" aria-expanded="false" style="width:50%"><font size="6">Cancel</font></button>
    <button type="button" class="btn btn-success" ng-click="Proceed()" aria-haspopup="true" aria-expanded="false" style="width:50%"><font size="6">Proceed</font></button>
</div>

Answer 1

在第一个按钮上添加一个class，并给它float:left。它将占用整个width.请参阅 Bootply. 中的工作演示

.hell {
  float: left
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div align="center">
  <button type="button" class="btn btn-warning hell" ng-click="Cancel()" aria-haspopup="true" aria-expanded="false" style="width:50%"><font size="6">Cancel</font>
  </button>
  <button type="button" class="btn btn-success" ng-click="Proceed()" aria-haspopup="true" aria-expanded="false" style="width:50%"><font size="6">Proceed</font>
  </button>
</div>