使用Django实现时,下拉菜单不起作用

时间:2018-01-16 03:27:24

标签: python html css django drop-down-menu

我刚接触Django并遇到了将其实施到我已经制作的静态网站的问题。

请问您为什么下拉菜单不起作用(不下降)?它只是在django实现之前的html / css文件时工作正常。

附加图片显示文件/文件夹布局 - 如果您需要查看任何其他文件,请告诉我,我可以发布它们。我以为我在错误的目录中有一些css(?)图片:IMAGE

{% load staticfiles %}
    <html>
        <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="description" content="Test Site">
        <meta content="width=device-width, initial-scale=1, user-scalable=no" name="viewport">

        <title>Test Site</title>
        <meta name="description" content="Test Site Web Application"/>

        <link rel="shortcut icon" href="{% static 'themes/images/favicon.ico' %}">

        <!-- Google icon -->
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

        <!-- Bootstrap css -->
        <link rel="stylesheet" href="{% static 'assets/css/bootstrap.min.css' %}">

        <!-- Propeller css -->
        <!-- build:[href] assets/css/ -->
        <link rel="stylesheet" href="{% static 'assets/css/propeller.min.css' %}">
        <!-- /build -->

        <!--Propeller date time picker css -->
        <link rel="stylesheet" href="{% static 'components/datetimepicker/css/bootstrap-datetimepicker.css' %}" />
        <link rel="stylesheet" href="{% static 'components/datetimepicker/css/pmd-datetimepicker.css' %}" />

        <!-- Propeller theme css-->
        <link rel="stylesheet" href="{% static 'themes/css/propeller-theme.css' %}" />

        <!-- Propeller admin theme css-->
        <link rel="stylesheet" href="{% static 'themes/css/propeller-admin.css' %}" />
        </head>
        <body>

        <!--Start Nav bar -->
        <nav class="navbar navbar-inverse navbar-fixed-top pmd-navbar pmd-z-depth">
            <!-- Placement Navbar -->
            <section class="row component-section">
                <!-- placement menu code and example -->
                <div class="col-md-12">            
                    <!-- placement menu example -->
                    <div class="container-fluid">
                    <!-- User information -->
                        <div class="dropdown pmd-dropdown pmd-user-info pull-right">
                            <a href="javascript:void(0);" class="btn-user dropdown-toggle media" data-toggle="dropdown" aria-expanded="false">
                                <div class="media-left">
                                    <div class="material-icons md-light pmd-md">person</div>
                                </div>
                            </a>
                            <ul class="dropdown-menu dropdown-menu-right" role="menu">
                                <li><a href="profile.html">Profile</a></li>
                                <li class="divider"></li>
                                {% if user.is_authenticated %}
                                    <li><a href="javascript:void(0);">Logout</a></li>
                                {% else %}
                                    <li><a href="javascript:void(0);">Login</a></li>
                                {% endif %}
                            </ul>
                        </div>
                        <div class="pmd-user-info pull-right">
                            <a href="javascript:void(0);" class="btn-user dropdown-toggle media" data-toggle="dropdown" aria-expanded="false">
                                <div class="media-left">
                                    <div class="material-icons md-light pmd-md">search</div>
                                </div>
                            </a>
                            <ul class="dropdown-menu dropdown-menu-right" role="menu">
                                <!-- section content start-->
                                <form id="validationForm" action="" method="post">
                                    <!-- here -->
                                    <div class="container-fluid full-width-container">
                                            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1 col-sm-12 col-xs-12">
                                                <div class="form-group pmd-textfield pmd-textfield-floating-label">
                                                    <label for="regular1" class="control-label">
                                                        Search...
                                                    </label>
                                                    <input type="text" id="regular1" class="form-control" autofocus="autofocus">
                                                </div>
                                            </div>
                                    </div>       
                                </form>
                            </ul>
                        </div>
                        <!-- Brand and toggle get grouped for better mobile display -->
                        <div class="dropdown pmd-dropdown pmd-user-info pull-left">
                            <a href="index.html" class="navbar-brand navbar-brand-custome">Test Site/a>
                        </div>
                    </div>
                    <!--<div class="pmd-sidebar-overlay"></div> -->
                </div>
            </section><!-- Placements Navbar end -->   
        </nav>  <!--End Nav bar -->

        <!--content area start-->
        <div id="content" class="pmd-content inner-page">
            {% block content %}
            {% endblock %}
        </div>
        <!-- content area end -->

        <!--footer start-->
        <footer class="admin-footer">
         <div class="container-fluid">
            <ul class="list-unstyled list-inline">
                <li>
                    <span class="pmd-card-subtitle-text">TestSite <span class="auto-update-year"></span>.</span>
            </li>
            <li class="pull-right for-support">
                    <a href="contact.html">
                    <div>
                          <h3 class="pmd-card-title-text">Contact Us</h3>
                        </div>
                </a>
            </li>
            </ul>
         </div>
        </footer>
        <!--footer end-->
        </body>
    </html>

0 个答案:

没有答案