如何解决以移动屏幕分辨率浏览器时，汉堡菜单不会展开
我在navbar中有一个简单的bootstrap。当我减小chrome浏览器的大小时，导航栏菜单变成汉堡图标，当我单击它时，菜单不可见。
app.component.html文件
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/css/bootstrap4-toggle.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/js/bootstrap4-toggle.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">eNno</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Service</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Blog</a>
</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
package.json文件
{
"name": "uiassignment","version": "0.0.0","scripts": {
"ng": "ng","start": "ng serve","build": "ng build","test": "ng test","lint": "ng lint","e2e": "ng e2e"
},"private": true,"dependencies": {
"@angular/animations": "~10.0.6","@angular/common": "~10.0.6","@angular/compiler": "~10.0.6","@angular/core": "~10.0.6","@angular/forms": "~10.0.6","@angular/platform-browser": "~10.0.6","@angular/platform-browser-dynamic": "~10.0.6","@angular/router": "~10.0.6","bootstrap": "^4.5.2","jquery": "^3.5.1","popper.js": "^1.16.1","rxjs": "~6.5.5","tslib": "^2.0.0","zone.js": "~0.10.3"
},"devDependencies": {
"@angular-devkit/build-angular": "~0.1000.5","@angular/cli": "~10.0.5","@angular/compiler-cli": "~10.0.6","@types/node": "^12.11.1","@types/jasmine": "~3.5.0","@types/jasminewd2": "~2.0.3","codelyzer": "^6.0.0","jasmine-core": "~3.5.0","jasmine-spec-reporter": "~5.0.0","karma": "~5.0.0","karma-chrome-launcher": "~3.1.0","karma-coverage-istanbul-reporter": "~3.0.2","karma-jasmine": "~3.3.0","karma-jasmine-html-reporter": "^1.5.0","protractor": "~7.0.0","ts-node": "~8.3.0","tslint": "~6.1.0","typescript": "~3.9.5"
}
}
tsconfig.json文件
{
"files": [],"references": [
{
"path": "./tsconfig.app.json"
},{
"path": "./tsconfig.spec.json"
}
]
}
angular.json文件
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json","version": 1,"newProjectRoot": "projects","projects": {
"UIAssignment": {
"projectType": "application","schematics": {},"root": "","sourceRoot": "src","prefix": "app","architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser","options": {
"outputPath": "dist/UIAssignment","index": "src/index.html","main": "src/main.ts","polyfills": "src/polyfills.ts","tsConfig": "tsconfig.app.json","aot": true,"assets": [
"src/favicon.ico","src/assets"
],"styles": [
"src/styles.css"
],"scripts": []
},"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts","with": "src/environments/environment.prod.ts"
}
],"optimization": true,"outputHashing": "all","sourceMap": false,"extractCss": true,"namedChunks": false,"extractLicenses": true,"vendorChunk": false,"buildOptimizer": true,"budgets": [
{
"type": "initial","maximumWarning": "2mb","maximumError": "5mb"
},{
"type": "anyComponentStyle","maximumWarning": "6kb","maximumError": "10kb"
}
]
}
}
},"serve": {
"builder": "@angular-devkit/build-angular:dev-server","options": {
"browserTarget": "UIAssignment:build"
},"configurations": {
"production": {
"browserTarget": "UIAssignment:build:production"
}
}
},"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n","options": {
"browserTarget": "UIAssignment:build"
}
},"test": {
"builder": "@angular-devkit/build-angular:karma","options": {
"main": "src/test.ts","tsConfig": "tsconfig.spec.json","karmaConfig": "karma.conf.js","styles": [
"./node_modules/bootstrap/dist/css/bootstrap.min.css","src/styles.css"
],"scripts": [
"./node_modules/jquery/dist/jquery.min.js","./node_modules/popper.js/dist/popper.min.js","./node_modules/bootstrap/dist/js/bootstrap.min.js"
]
}
},"lint": {
"builder": "@angular-devkit/build-angular:tslint","options": {
"tsConfig": [
"tsconfig.app.json","tsconfig.spec.json","e2e/tsconfig.json"
],"exclude": [
"**/node_modules/**"
]
}
},"e2e": {
"builder": "@angular-devkit/build-angular:protractor","options": {
"protractorConfig": "e2e/protractor.conf.js","devServerTarget": "UIAssignment:serve"
},"configurations": {
"production": {
"devServerTarget": "UIAssignment:serve:production"
}
}
}
}
}
},"defaultProject": "UIAssignment","cli": {
"analytics": "01c58ec0-920b-4102-a361-7d46f52578c7"
}
}
index.html文件
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>UIAssignment</title>
<base href="/">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
app.module.ts文件
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],imports: [
BrowserModule,AppRoutingModule
],providers: [],bootstrap: [AppComponent]
})
export class AppModule { }
项目信息
Angular CLI: 10.0.7
Node: 12.18.1
Angular: 10.0.11
此菜单未展开
如何解决此问题？
解决方法
您的项目中有几个问题。我将逐步解释，这是怎么回事。
- 您在
bootstrap中添加了package.json，并使用npm i或yarn（取决于您使用的是什么）进行安装。之后，将其加载到node_modules/bootstrap中。此外，jquery和popper之类的要求已安装在文件夹node_modules中。没关系。然后，您使用angular.json进行导入。但是，有两个问题：
- （a）您已在
"test"部分中添加了它，但必须在"build"部分中对其进行了定义 - （b）几个链接不正确并且不存在（例如，查看
node_modules/boostrap/...文件夹）。
这是您的“新” angular.json
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json","version": 1,"newProjectRoot": "projects","projects": {
"UIAssignment": {
"projectType": "application","schematics": {},"root": "","sourceRoot": "src","prefix": "app","architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser","options": {
"outputPath": "dist/UIAssignment","index": "src/index.html","main": "src/main.ts","polyfills": "src/polyfills.ts","tsConfig": "tsconfig.app.json","aot": true,"assets": [
"src/favicon.ico","src/assets"
],"styles": [
"./node_modules/bootstrap/dist/css/bootstrap.css","src/styles.css"
],"scripts": [
"./node_modules/jquery/dist/jquery.js","./node_modules/popper.js/dist/umd/popper.js","./node_modules/bootstrap/dist/js/bootstrap.js"
]
},"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts","with": "src/environments/environment.prod.ts"
}
],"optimization": true,"outputHashing": "all","sourceMap": false,"extractCss": true,"namedChunks": false,"extractLicenses": true,"vendorChunk": false,"buildOptimizer": true,"budgets": [
{
"type": "initial","maximumWarning": "2mb","maximumError": "5mb"
},{
"type": "anyComponentStyle","maximumWarning": "6kb","maximumError": "10kb"
}
]
}
}
},"serve": {
"builder": "@angular-devkit/build-angular:dev-server","options": {
"browserTarget": "UIAssignment:build"
},"configurations": {
"production": {
"browserTarget": "UIAssignment:build:production"
}
}
},"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n","options": {
"browserTarget": "UIAssignment:build"
}
},"test": {
"builder": "@angular-devkit/build-angular:karma","options": {
"main": "src/test.ts","tsConfig": "tsconfig.spec.json","karmaConfig": "karma.conf.js","./node_modules/bootstrap/dist/js/bootstrap.js"
]
}
},"lint": {
"builder": "@angular-devkit/build-angular:tslint","options": {
"tsConfig": [
"tsconfig.app.json","tsconfig.spec.json","e2e/tsconfig.json"
],"exclude": [
"**/node_modules/**"
]
}
},"e2e": {
"builder": "@angular-devkit/build-angular:protractor","options": {
"protractorConfig": "e2e/protractor.conf.js","devServerTarget": "UIAssignment:serve"
},"configurations": {
"production": {
"devServerTarget": "UIAssignment:serve:production"
}
}
}
}
}
},"defaultProject": "UIAssignment","cli": {
"analytics": "01c58ec0-920b-4102-a361-7d46f52578c7"
}
}
-
您在
<!doctype html><html lang="en"> ...内添加了app.component.html。但是，app.component.html已装入index.html内（使用<app-root></app-root>），因此请不要在其中添加这些内容。相反，您的app.component.html应该只包含<nav>...</nav>和所有其他内容，但不能包含标题/导入。 -
由于您在
package.json中定义了Bootstrap等，并在angular.json中将其加载到了项目中，因此无需使用<script>或{ {1}}。
这是您的“新” <link>：
app.component.html和您的“新” <nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">eNno</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Service</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Blog</a>
</li>
</ul>
</div>
</div>
</nav>
：
index.html 请注意，对<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>UIAssignment</title>
<base href="/">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
还请注意，在Angular项目中添加angular.json和bootstrap.js不是正确的使用方式。而是看看ngx-bootstrap
如果您的项目由于任何原因无法运行，您也可以从jQuery中删除添加的styles和scripts，并在angular.json {{1 }}：
index.html祝你好运！
,使用bootstrap的CDN链接并两次调用css链接，并使用不同版本的不同bootstrap js链接。
在使用bootstarp软件包时。
按如下所示将其导入 angular.json ：
res <- unsplit(by(df1,df1$Plot,function(x)
transform(x,BA_Larger=sapply(1:nrow(x),function(i)
sum(x[x[,3] > x[i,3],3])))),df1$Plot)
res
# Plot Tree BasalArea BA_Larger
# 1 1 1 4 12
# 2 1 2 5 7
# 3 1 3 7 0
# 4 1 4 3 16
# 5 2 1 4 20
# 6 2 2 6 9
# 7 2 3 9 0
# 8 2 4 5 15
重新启动服务（如果正在运行），并且Bootstrap应该在您的应用上正常工作。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。