CSS Bootstrap 在 Angular 6 中无法正常工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/52676474/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap not working properly in Angular 6
提问by ATT
I started learning Angular and I'm following a tutorial. I tried putting the code as in the tutorial for the navigation-bar:
我开始学习 Angular，我正在学习教程。我尝试将代码放在导航栏的教程中：
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a href="#" class="navbar-brand">Recipe book</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li> <a href="#">Recipe</a></li>
<li> <a href="#">Shopping list</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<ul class="dropdown-menu">
<li><a href="#">Save data </a></li>
<li><a href="#">Fetch data </a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
But all I get is this:
但我得到的只是这个：
If I remove bootstrap, I do get the other items.
如果我删除引导程序，我会得到其他项目。
I used npm install bootstrap --saveand @import "~bootstrap/dist/css/bootstrap.css";in styles.css to use bootstrap.
我使用npm install bootstrap --save和@import "~bootstrap/dist/css/bootstrap.css";在styles.css 中使用引导程序。
EDIT:
编辑：
I did not wanted to open a question with two problem, but after looking at the answers so far ill describe another problem I had:
我不想打开一个有两个问题的问题，但是在查看了迄今为止的答案之后，我无法描述我遇到的另一个问题：
I also installed Jquery using nmp install jquery --saveand added to angular.json:
我还使用安装了 Jquerynmp install jquery --save并将其添加到 angular.json：
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.css",
"src/styles.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/tether/dist/js/tether.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
In this case, after removing @import "~bootstrap/dist/css/bootstrap.css";from styles.css`, bootstrap is not working at all.
The only way i got bootstrap to work is as i described in the question.
在这种情况下，@import "~bootstrap/dist/css/bootstrap.css";从styles.css` 中删除后，bootstrap 根本不起作用。我让引导程序工作的唯一方法是我在问题中描述的。
EDIT 2:
编辑2：
I started a new project and followed @HDJEMAI s answer instructions.
I now still get the same page as in the picture but its now working through the rows added to styles and scripts in angular.json and not through the @import "~bootstrap/dist/css/bootstrap.css"in the styles.css file . But the problem is still that is not the same as in the tutorial even though the code is the same.
我开始了一个新项目并按照@HDJEMAI 的回答说明进行操作。我现在仍然得到与图片相同的页面，但它现在通过添加到 angular.json 中的样式和脚本的行而不是通过 style.css@import "~bootstrap/dist/css/bootstrap.css"文件中的行进行处理。但问题仍然是与教程中的不同，即使代码相同。
This is what he gets in the tutorial:
这是他在教程中得到的：
回答by HDJEMAI
You have to install both bootstrapand JQuery:
您必须同时安装bootstrap和JQuery：
npm install bootstrap jquery --save
Then you will find these files in your node module folder:
然后你会在你的节点模块文件夹中找到这些文件：
node_modules/jquery/dist/jquery.min.js
node_modules/bootstrap/dist/css/bootstrap.min.css
node_modules/bootstrap/dist/js/bootstrap.min.js
Then you have to update your angular.jsonfile:
然后你必须更新你的angular.json文件：
"styles": [
"styles.css",
"./node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
"./node_modules/jquery/dist/jquery.min.js",
"./node_modules/bootstrap/dist/js/bootstrap.min.js"
],
If you do not add the jquery.min.jsscript Bootstrap will not work.
如果不添加jquery.min.js脚本 Bootstrap 将无法工作。
Another requirementis popper.jsif you need Bootstrap dropdownthen you will need to install it and add the script file as well
另一个要求是，popper.js如果您需要Bootstrap 下拉菜单，那么您还需要安装它并添加脚本文件
npm install popper.js
Then add this script as well
然后也添加这个脚本
"styles": [
"styles.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/popper.js/dist/popper.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
],
Bootstrap dropdown require Popper.js (https://popper.js.org)
回答by baiju krishnan
dear friend iam studying same angular6 tutorial. I also faced same situation.finally I have solved this First uninstall bootstrap. next step is to install bootstrap by following command
亲爱的朋友，我正在学习相同的 angular6 教程。我也遇到了同样的情况。最后我解决了这个首先卸载引导程序。下一步是通过以下命令安装引导程序
npm install --save bootstrap@3 A
next go to styles.css and paste
接下来转到styles.css并粘贴
@import "node_modules/bootstrap/dist/css/bootstrap.css"
your application will defenitely work exactly same as that in that video tutorial of udemy
您的应用程序肯定会与 udemy 的视频教程中的应用程序完全相同
回答by Mann Wong
If you are adding the bootstrap path into the angular.json file, make sure it is the styleswithin the project\architect\build. Not the one in the project\architect\test.
如果要将引导程序路径添加到 angular.json 文件中，请确保它是project\architect\ build 中的样式。不是 project\architect\ test中的那个。
{
"projects": {
"architect": {
"build": {
"styles": [
"node_modules/bootstrap/dist/bootstrap.min.css",
"src/styles.css"
],
"test": {
"styles": [
"src/styles.css"
],
回答by Utkarsh Bhushan
I had the same issue. Below helped for me.
我遇到过同样的问题。下面对我有帮助。
Stop the server and recompile using ng serve
停止服务器并使用 ng serve 重新编译
回答by Jai Kumaresh
Add your angular.json
添加你的 angular.json
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"xtreme-admin-angular": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {},
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/xtreme-admin-angular",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"node_modules/bootstrap/dist/bootstrap.min.css"
//Your root depend this path
]
And rerun your project
并重新运行您的项目
回答by Xodblux
As I see, if you are following "Maximilian Schwarzmüller" course in UDEMY, make sure you have installed Bootstrap 3, not anything else. Use these commands in your project folder (the uninstall only if other version are installed).
如我所见，如果您正在 UDEMY 中学习“Maximilian Schwarzmüller”课程，请确保您已安装 Bootstrap 3，而不是其他任何东西。在您的项目文件夹中使用这些命令（仅当安装了其他版本时才卸载）。
npm uninstall --save bootstrap
npm install --save bootstrap@3
This will install it locally to your project.
这会将它本地安装到您的项目中。
I had Bootstrap4 installed (thinking the course would still work with 4 instead of 3) and using Bootstrap3 instead worked in this same project as your in the course (without popper and jQuery).
我安装了 Bootstrap4（认为课程仍然可以使用 4 而不是 3）并使用 Bootstrap3 代替在与课程相同的项目中工作（没有 popper 和 jQuery）。
回答by Charles
After installation of bootstrap and adding it to angular.jsonfile.
安装引导程序并将其添加到angular.json文件后。
If bootstrap doesn't render, just change the port of development URL:
如果引导程序没有呈现，只需更改开发 URL 的端口：
ng serve --port <your choice of port>
回答by Salman Arefin
Add this 3 links in your index.html file. You don't have to install bootstrap or jquery or update your angular.json file. Works as a charm.
在 index.html 文件中添加这 3 个链接。您不必安装 bootstrap 或 jquery 或更新您的 angular.json 文件。作为一种魅力。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
回答by SKS
Had same issues with bootstrap items using VS code editor. I tried ng buildbefore ng serveand bootstrap items worked fine.
使用 VS 代码编辑器的引导项也有同样的问题。我ng build之前尝试过ng serve，引导项目工作正常。
回答by Usman Shabbir
I think it is because of the problem with bootstrap, try this:
我认为这是因为引导程序的问题，试试这个：
Step 1.Inside .angular-cli.jsonfile
步骤 1.内部.angular-cli.json文件
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.min.css"
]
Remove "../node_modules/bootstrap/dist/css/bootstrap.min.css"
消除 "../node_modules/bootstrap/dist/css/bootstrap.min.css"
Step 2.Go to styles.css
步骤 2.前往styles.css
Import bootstrap by adding this line
通过添加此行导入引导程序
@import "~bootstrap/dist/css/bootstrap.css";
These steps solved the errors I got during the building process.
这些步骤解决了我在构建过程中遇到的错误。
