Класс BTN не создает пространство между кнопками

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

Это небольшое изменение в Angular 6 и более поздних версиях, которое по умолчанию удаляет пробелы в 4px и другие пробелы.Чтобы включить эту функцию, вы можете заключить кнопки в другом элементе div с классом btn-toolbar.как для вашего кода вы можете просто написать

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

Answer 2

Было бы полезно, если бы вы показали нам результат - я не могу сказать, в чем проблема.Я вижу пробел в коде ниже - я только что скопировал ваш код.Если вы хотите добавить больше полей, просто добавьте немного кода ниже в ваш код.

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