在第一个button上添加一个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>

“btn-block”是你通常想要的，这样按钮就可以在它们的列中伸展（对于任何在Google中找到这个的人来说）。

<div class="row">
    <div class="col-md-6">
        <button class="btn btn-warning btn-block">Cancel</button>
    </div>
    <div class="col-md-6">
        <button class="btn btn-success btn-block">Proceed</button>
    </div>
</div>

更新：btn-block已从Bootstrap 5.0中删除，如果您已升级，请尝试w-100。

这么做

<div align="center">
   <div class="row">
     <div class="col-md-6">
        <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>
     </div>
    <div class="col-md-6">
         <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>
</div>

顺便说一下，你不应该使用align=“center”，那是老式的HTML，bootstrap已经有了一个这样的类，而不是这样做

<div align="center">

这么做

<div class="text-center">

这些div上的col-md-6类是建立50%的类，如果你想要更少，你可以使用其他类，如col-md-1，直到col-md-12
希望能帮上忙。

如果您使用的是inline blocks，则会遇到此问题。
尝试使用margin right修复程序来防止 Package ：
HTML

<div class="blocks">
    <div class="block block-1">Block 1</div>
    <div class="block block-2">Block 2</div>
</div>

CSS

.block {
    display: inline-block;
    width: 50%;
}

.block-1 {
    margin-right: -0.2em; /* spacing fix */ 
}

下面是一个Codepen，其中包含针对您的场景的修复：http://codepen.io/anon/pen/qZmKYr

Bootstrap有clearfix类，可以使用float-left和float-right类。
下面是如何用途：https://getbootstrap.com/docs/4.0/utilities/clearfix/
举个例子：

<div class="clearfix">
     <button type="button" class="btn btn-success float-left" style="width: 48%;">Save</button>
     <button type="button" class="btn btn-danger float-right" style="width: 48%;">Cancel</button>
</div>

好吧，受到收到的评论的启发，我得到了一个工作解决方案（无法判断其优雅性，但结果是我正在寻找的）：

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

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