Angular 6 和引导程序

Question

我使用 Angular 5 和 Bootstrap 开发了 ASP.NET MVC 5 单页应用程序。最近我更新了应用程序以使用 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