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

Question

我有一个模态窗口，需要在底部显示两个按钮，例如使用 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>

原文由 FDavidov 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

好吧，受到收到的评论的启发，我得到了一个可行的解决方案（无法判断它的优雅，但结果正是我想要的）：

 <table style="width:100%">
    <tbody>
        <tr>
            <td class=" btn-warning" ng-click="Cancel()"  aria-haspopup="true" aria-expanded="false" style="width:50%;text-align:center;padding:10px 0 10px 0;cursor:pointer">
                <font size="6">Cancel</font>
            </td>
            <td class=" btn-success" ng-click="Proceed()" aria-haspopup="true" aria-expanded="false" style="width:50%;text-align:center;padding:10px 0 10px 0;cursor:pointer">
                <font size="6">Proceed</font>
            </td>
        </tr>
    </tbody>
</table>

这显示为占据整个宽度的两个矩形，并随屏幕正确缩小。

原文由 FDavidov 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

Add a class on the first button and give it float:left will be take whole width .See the working demo in 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>

原文由 Chonchol Mahmud 发布，翻译遵循 CC BY-SA 3.0 许可协议