【发布时间】:2021-12-11 22:27:13
【问题描述】:
我是 HTML 和 Flask 的新手。我正在尝试创建一个导航栏,但我不知道为什么汉堡按钮不起作用。看起来当我把窗口变小时,会出现汉堡按钮,但是当我单击它时它不起作用。它不显示“登录”“主页”或“注册”等项目。
/*Anything related to color with be put in these css file */
/*body, paragraphs, etc*/
* {
margin: 0px;
padding: 0px;
font-family: 'Genos', sans-serif;
}
/*backgroud color*/
body{
background-color: #beeaa9 !important;
}
.navbar-dark .navbar-nav .nav-link {
color:white;
}
/*-Navbar color*/
.bg-custom-1{
background-image: linear-gradient(90deg,#5ae958 35%, #58e9af 100%) !important;
}
/*fa-bars color
.navbar .fas{
color: rgb(30, 47, 47)!important;
font-size: 26px;
}
*/
/*margin-right, size-font*/
.navbar-nav{
text-align: right;
margin-right: 20px;
font-size: 20px;
/*needs space between the buttoms*/
}
.bg-custom-1 .navbar-toggler{
padding-right: 20px;
outline: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name= "viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.min.united.css') }}">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href=https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css>
<title>Bank App Web</title>
</head>
<body>
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
<div class="header">
<nav class="navbar navbar-expand-lg navbar-dark bg-custom-1">
<a class=navbar-brand href=""><img src="{{ url_for('static', filename='img/logo.png')}}" > </a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"></button>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="{{ url_for('main') }}">Home </a>
</li>
<li class="nav-item" >
<a class="nav-link" href="{{ url_for('first') }}">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ url_for('first') }}">Sign Up</a>
</li>
</ul>
</div>
</nav>
</div>
</body>
</html>
我把 HTML 和 CSS 文件放在这里!我不知道为什么没有出现。我想知道我错过了什么。任何帮助表示赞赏!
【问题讨论】: