Bootstrap按钮无间距问题：Angular 12中Bootstrap 3按钮未分隔

核心原因 #

Bootstrap 3 和 Bootstrap 4 在按钮间距的默认设计上存在差异：

• Bootstrap 4 会自动为同容器内相邻的 .btn 类按钮添加间距（通过内置间距样式或 flex 布局处理）；
• Bootstrap 3 本身没有给相邻 .btn 按钮添加默认间距的逻辑，所以你的按钮会紧贴在一起，这是该版本的正常表现，并非配置错误。

验证方式 #

打开浏览器开发者工具（F12）选中按钮查看样式：

• Bootstrap 3 的 .btn 样式仅包含内边距、边框、字体等属性，无 margin 相关默认规则；
• 对比 Bootstrap 4 的 .btn，会看到类似 margin-right: .5rem 或 flex 布局下的间距设置。

解决办法 #

你可以通过以下几种方式给按钮添加间距：

1. 使用 Bootstrap 3 内置间距类
   Bootstrap 3 提供了格式为 {m/p}-{direction}-{size} 的间距辅助类：

• m 代表 margin，p 代表 padding；
• direction 可选 t(上)、r(右)、b(下)、l(左)、x(左右)、y(上下)；
• size 可选 0、1、2、3、4、5（对应不同间距大小）。

给第一个按钮添加右侧间距的示例：

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

2. 自定义 CSS 规则
   如果需要全局给同容器内的相邻按钮添加间距，可在项目自定义 CSS 文件中添加：

/* 给相邻的.btn按钮添加左侧间距 */
.btn + .btn {
    margin-left: 10px;
}

该规则会自动作用于所有相邻按钮，无需逐个添加类。

3. 使用按钮组组件（按需选择）
   若希望按钮呈现合并边框的组样式（而非普通间距），可使用 Bootstrap 3 的 btn-group 组件：

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

注意：这种方式是让按钮紧密连接成组，和普通间距效果不同，请根据需求选择。

内容的提问来源于stack exchange，提问作者Matt W