Question

这是我在我的应用中的代码。该应用程序中所有的引导程序类都可以使用，但是如果使用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>

Answer 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>

Answer 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>

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

2 个答案: