Angular 7引导程序不会加载设计

Question

为什么Bootstrap无法在我的angular 7中正确加载设计

我正在使用Visual Studio代码，添加了新组件并login并执行了以下查询

npm install bootstrap
npm install popper.js
npm install jquery

然后我修改了angular.json的样式和脚本数组

"styles": [
              "src/styles.scss",
              "node_modules/bootstrap/dist/css/bootstrap.min.css"
            ],
            "scripts": [
              "node_modules/bootstrap/dist/js/bootstrap.min.js",
              "node_modules/jquery/dist/jquery.slim.min.js",
              "node_modules/popper.js/dist/umd/popper.min.js"
            ],

但是，为什么Web浏览器不加载表单的设计？

这是代码

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

我从这里得到的https://getbootstrap.com/docs/4.3/components/forms/

我是否错过了修改另一个文件以便将引导程序4正确加载到角度7的操作？

Answer 1

将此行添加到您的style.css

@import "~bootstrap/dist/css/bootstrap.css";

希望能帮助到你