引导按钮不分开

Question

在按钮的getbootstrap 文档页面上，示例按钮有一个type和两个 css 类：

<button type="button" class="btn btn-primary">Primary</button>

按钮非常整齐，略微分开。

我有一个简单的 Angular 12 应用程序，我在其中安装了引导程序 3，如下所示：

npm install --save bootstrap@3

在我的应用程序中，按钮站点完全相互对齐，使用以下代码：

<div class="row">
    <div class="col-xs-12">
        <button type="button" class="btn btn-primary">Add Server</button>
        <button type="button" class="btn btn-primary">Add Blueprint</button>
    </div>
</div>

看起来像这样：

我确定包含引导程序 css，因为如果我从angular.json文件中删除"node_modules/boo..."行：

        "styles": [
          "node_modules/bootstrap/dist/css/bootstrap.css",
          "src/styles.css"
        ],

页面上的所有样式都完全消失了。

那么，如果我正确加载引导样式并将其应用于按钮，为什么它们不像文档中的示例按钮那样整齐地呈现？