btn 类不会在按钮之间创建空间答案

【问题标题】：btn class does not create space in between buttonsbtn 类不会在按钮之间创建空间
【发布时间】：2019-07-02 18:14:04
【问题描述】：

这是我的应用程序中的代码。在这个应用程序中工作的所有引导类，但在 btn 类的情况下，它不会在两者之间提供默认的 margin。我在codepen上尝试了它给margin的代码，但在我的应用程序上margin不存在。按钮保持在一起。

可能是什么问题？

<div class="row">
  <div class="col-xs-12">
    <form>
      <div class="row">
        <div class="col-sm-5 form-group">
          <label for="name">Ingredient name</label>
          <input type="text" id="name" class="form-control">
        </div>
        <div class="col-sm-2 form-group">
          <label for="amount">Amount</label>
          <input type="number" id="amount" class="form-control">
        </div>
      </div>
      <div class="row">
        <div class="col-xs-12">
          <button type="submit" class="btn btn-success">Add</button>
          <button type="button" class="btn btn-danger">Delete</button>
          <button type="button" class="btn btn-primary">Clear</button>
        </div>
      </div>
    </form>
  </div>
</div>

【问题讨论】：

您显然在某个地方加载了其他 CSS，覆盖了“按钮”的引导 css
我检查过我没有使用任何其他 css 属性。难道是我在我的项目中安装的引导文件有一些缺陷
我以为您使用了任何其他外部或内部 css，他正在覆盖引导程序默认 css 属性。如果您分享您的网址，那么我会找到您的错误。
您必须为您的 .btn 类添加样式。请检查您的样式文件并从样式中删除边距属性
嘿，我在做同样的课程，我有同样的问题，你找到原因了吗？

标签： html css twitter-bootstrap-3

【解决方案1】：

如果您向我们展示结果会有所帮助 - 我不知道问题出在哪里。我在下面的代码中看到了一个空格 - 我刚刚复制了您的代码。如果您想添加更多边距，只需将下面的一些 css 代码添加到您的代码中即可。

.btn {
  margin: 10px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-xs-12">
    <form>
      <div class="row">
        <div class="col-sm-5 form-group">
          <label for="name">Ingredient name</label>
          <input type="text" id="name" class="form-control">
        </div>
        <div class="col-sm-2 form-group">
          <label for="amount">Amount</label>
          <input type="number" id="amount" class="form-control">
        </div>
      </div>
      <div class="row">
        <div class="col-xs-12">
          <button type="submit" class="btn btn-success">Add</button>
          <button type="button" class="btn btn-danger">Delete</button>
          <button type="button" class="btn btn-primary">Clear</button>
        </div>
      </div>
    </form>
  </div>
</div>

【讨论】：

它适用于将边距属性应用于 .btn 类。但是为什么 btn 类自动不给我的项目留余地呢？将引导程序安装到我的项目时可能是由于任何缺陷造成的吗？
btn 通常不会添加任何边距 - 没有错误，就是这样。

【解决方案2】：

这是 Angular 6 及更高版本中的一个细微变化，默认情况下会删除 4px 间隙和其他空白。要启用此功能，您可以使用类 btn-toolbar 将按钮包装在另一个 div 中。就像您的代码一样，您可以简单地编写

<div class="btn-toolbar">
  <button type="submit" class="btn btn-success">Add</button>
  <button type="button" class="btn btn-danger">Delete</button>
  <button type="button" class="btn btn-primary">Clear</button>
</div>

【讨论】：