如何在引导按钮之间添加空格而无需手动添加边距？

Question

我正在阅读与 Angular 相关的在线教程之一。安装的 bootstrap 版本是 3。

作者写了一些html：

       <div class="row">
            <div class="col-xs-12">
                <button class="btn btn-success" type="submit">Add</button>
                <button class="btn btn-danger" type="button">Delete </button>
                <button class="btn btn-primary" type="button">Clear </button>
            </div>
        </div>

很简单吧？

现在当他在屏幕上显示它时，按钮出现了一些边距，但在我的情况下，它们并排放置，根本没有间隙。

我搜索了一下，发现我可以通过多种方式手动添加间隙，但我不想使用其中任何一种。我想知道在我没有得到类似结果的情况下究竟缺少什么。

我安装了与作者相同版本的引导程序，并一步一步地跟踪所有内容。作者没有在任何地方覆盖任何默认行为。

请告诉我可能的原因。

谢谢。

编辑：

这就是他们在我的屏幕上的样子。没有间隙。

Answer 1

您可以通过包含 m[xytrbl]-# 类在 Bootstrap 中为元素的任何一侧添加边距，如下所示：

• 四周宽度2级边距：m-2
• 左右3级宽度边距：mx-3
• 底部1级宽度边距：mb-1
• 左侧4级宽度边距：ml-4

同样的想法也适用于填充，将 m 替换为 p。

Answer 2

你能告诉我它在你的系统上的样子吗？我在没有设置任何额外边距的情况下获得这些边距。

使用 Bootstrap 3.3.7

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="row">
  <div class="col-xs-12">
    <button class="btn btn-success" type="submit">Add</button>
    <button class="btn btn-danger" type="button">Delete </button>
    <button class="btn btn-primary" type="button">Clear </button>
  </div>
</div>