【问题标题】:Why is the hamburger button in my navbar not working?为什么我的导航栏中的汉堡包按钮不起作用?
【发布时间】: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 文件放在这里!我不知道为什么没有出现。我想知道我错过了什么。任何帮助表示赞赏!

【问题讨论】:

    标签: html css flask


    【解决方案1】:

    Bootstrap 需要其 JavaScript 插件才能运行 (documentation);

    将其包含在您的页面中:

     /*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">
    
            <!-- include this -->
            <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
            <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
    
    
            <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">
                            <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>

    (在包含的&lt;span&gt; 元素之前,您的按钮(&lt;/button&gt;)还有一个额外的结束 html 标记。删除它)

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2018-12-13
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2016-10-20
      • 1970-01-01
      • 2017-06-29
      • 1970-01-01
      相关资源
      最近更新 更多