Угловой 6 и Bootstrap

Question

Я разработал одностраничное приложение ASP.NET MVC 5 с использованием Angular 5 и Bootstrap.Недавно я обновил приложение для использования Angular 6. Теперь в макете HTML нет пробелов между элементами управления Bootstrap.

Например, этот HTML:

<form class="form-inline">
    <div class="form-group">
      <label for="exampleInputName2">Name</label>
      <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
    </div>
    <div class="form-group">
      <label for="exampleInputEmail2">Email</label>
      <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
    </div>
    <button type="submit" class="btn btn-default">Send invitation</button>
 </form>

Инструменты разработки Firefox редактируют параметр HTML, отображаемый как:

<form class="form-inline"><div class="form-group"><label for="exampleInputName2">Name</label><input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe"></div><div class="form-group"><label for="exampleInputEmail2">Email</label><input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com"></div><button type="submit" class="btn btn-default">Send invitation</button></form>.

Когда я редактирую HTML и добавляю пробел или разрыв строки, как в первом примере, браузер отображает пробелы между элементами управления, как должно быть.

Является ли Angular 6 сжимает HTML шаблонов компонентов?Как сделать так, чтобы приложение (использующее Bootstrap) выглядело так, как ожидалось?

Answer 1

Вы можете получить отличные компоненты дизайна от https://material.angular.io/. См. https://material.angular.io/guide/getting-started