Html 如何使用引导在按钮之间放置空格？

我有三个按钮： 我试图在这3个按钮之间留出一些空间，但我总是失败。 那么，我怎样才能在不破坏响应性设计的情况下留出一些空间呢？ 我需要按钮之间的空间大小相同（小/中/大空间）

此外，我还尝试将每个按钮放在每个列中，并将“col-sm-3”播放到12个，但效果更糟

我经常看到的是（不是我需要的）：

---

使用边距辅助类：

css:

html:

加载服务器1
登录
注销

我也试过了！-->不工作检查这里工作良好如果我改为col-lg-3它工作正常，但我仍然认为它给了我很大的空间，我想根据我的要求控制这些空间。我认为bootstrap 3没有边距类助手。因此，您可以创建自己的类。我更新了我的答案。如果解决了您的问题，请告诉我。我根据旧教程工作，因此版本为3.4.1我看到了您的解决方案，它在您的IDE中工作。-->但是我用的是VSCode（angular project），它在那里不起作用。。。。

<h4>Welcome to Server Manager 4.0</h4>
<p>Manage your Servers and Users.</p>
<div class="container">
  <div class="row">
    <div class="col-sm-3 justify-content-around" style="background-color:lightgray;">
        <button class="btn btn-primary " (click)="onLoadServers(1)">Load Servers 1</button>
        <button class="btn btn-success" (click)="onLogin()">Login</button>
        <button class="btn btn-danger" (click)="onLogout()">Logout</button>
    </div>
  </div>
</div>

justify-content-around

.mx {
  margin: 0 5px;
}

    <div class="col-sm-3" style="background-color:lightgray;">
        <button class="btn btn-primary mx " (click)="onLoadServers(1)">Load Servers 1</button>
        <button class="btn btn-success mx" (click)="onLogin()">Login</button>
        <button class="btn btn-danger mx" (click)="onLogout()">Logout</button>
    </div>