我的bootstrap下拉项目无法点击(显示)。

问题描述 投票:0回答:1

每当我在Django项目中加入bootstrap.min.css的链接时,我的下拉菜单就变得无法点击。我是一个学习Django的人,对bootstrap没有什么了解。下面的教程使用了cdn来包含bootstrap,但由于网络连接的原因,我手动下载了它。虽然下载的bootstrap可以用,但是下拉菜单却不能用。谁能帮我解决一下... 我现阶段不能继续学习了。先谢谢了.代码如下。

{% load static %}
<!doctype html> 
<html lang="en"> 
    <head> 
    <!-- Required meta tags --> 
    <meta charset="utf-"> 
    <meta name="viewport" content="width=device-width, initial-scale=, shrink-to-fit=no">
    <!-- Bootstrap CSS --> 
    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}" 
    integrity="sha-MCw/SFnGEfJTGXwEOngsVZtNXFoaoApmYmi\ uXoPkFOJwJERdknLPMO" 
    crossorigin="anonymous">


    <title>{% block title %}Newspaper App{% endblock title %}</title> 
</head> 
<body> 
        <nav class="navbar navbar-expand-md navbar-dark bg-dark mb-"> 
            <a class="navbar-brand" href="{% url 'home' %}">Newspaper</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" 
                data-target="#navbarCollapse" aria-controls="navbarCollapse" 
                aria-expanded="false" aria-label="Toggle navigation"> 
                <span class="navbar-toggler-icon"></span>
            </button> 
            <div class="collapse navbar-collapse" id="navbarCollapse"> 
                {% if user.is_authenticated %} 
                    <ul class="navbar-nav ml-auto"> 
                        <li class="nav-item"> 
                            <a class="nav-link dropdown-toggle" data-toggle="dropdown "href="#" id="userMenu"
                                aria-expanded="false"> 
                                {{ user.username }} 
                            </a> 
                            <div class="dropdown-menu dropdown-menu-right" 
                                aria-labelledby="userMenu"> 
                                <a class="dropdown-item" 
                                href="{% url 'password_change'%}">Change password</a> 
                                <div class="dropdown-divider"></div> 
                                <a class="dropdown-item" href="{% url 'logout' %}"> 
                                    Log Out</a>
                            </div>
                        </li>
                    </ul>
                {% else %}
                    <form class="form-inline ml-auto"> 
                        <a href="{% url 'login' %}" class="btn btn-outline-secondary"> 
                        Log In</a> 
                        <a href="{% url 'signup' %}" class="btn btn-primary ml-">
                        Sign up</a> 
                    </form>
                {% endif %}
            </div>
        </nav>
        <div class="container"> 
            {% block content %} 
            {% endblock content %}
        </div>

    <!-- Optional JavaScript --> 
   <!-- <jQuery first, then Popper.js, then Bootstrap JS -->
   <script src="https://code.jquery.com/jquery-...slim.min.js" integrity="sha-qi/X+DzOrTabKJStQIAqVgRVzpbzosmXKp\ YfRvH+abtTEPijizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/\ ../ umd/popper.min.js" integrity="sha-ZMPrVomIykV++JUJjBkWLaUAdnaCwoqbB\ JiSnjAK/ lWvCWPIPm" crossorigin="anonymous"></script>
    <script src="{% static 'js/bootstrap.min.js' %}" 
    integrity="sha-ChfqqxuZUCnJSK+MXmPNIyEZbWhIMqErYiqJxyMiZ\ OW/JmZQstwEULTy" 
    crossorigin="anonymous"></script>

</body> 
</html>
#settings.py
"""
Django settings for helloworld_project project.

Generated by 'django-admin startproject' using Django 3.0.5.

For more information on this file, see
https://docs.djangoproject.com/en/3.0/topics/settings/

For the full list of settings and their values, see
https://docs.djangoproject.com/en/3.0/ref/settings/
"""

import os

# Build paths inside the project like this: os.path.join(BASE_DIR, ...)
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))


# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/3.0/howto/deployment/checklist/

# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = 'z0qdn^sf&ill&gg%3myb#q)bzp$!^xnn-3(1po+blyjt1(bxyv'

# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True

ALLOWED_HOSTS = []


# Application definition

INSTALLED_APPS = [

    #local
    'users.apps.UsersConfig',
    'pages.apps.PagesConfig',
    'articles.apps.ArticlesConfig',
    #'blog.apps.BlogConfig',
    #'accounts.apps.AccountsConfig',
    #'posts.apps.PostsConfig',
    #'page.apps.PageConfig',

    # 3rd Party
    'crispy_forms',

    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
]

TIME_ZONE = 'Africa/Lagos'

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

ROOT_URLCONF = 'helloworld_project.urls'

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates')],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

WSGI_APPLICATION = 'helloworld_project.wsgi.application'


# Database
# https://docs.djangoproject.com/en/3.0/ref/settings/#databases

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
    }
}


# Password validation
# https://docs.djangoproject.com/en/3.0/ref/settings/#auth-password-validators

AUTH_PASSWORD_VALIDATORS = [
    {
        'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
    },
]


# Internationalization
# https://docs.djangoproject.com/en/3.0/topics/i18n/

LANGUAGE_CODE = 'en-us'

TIME_ZONE = 'UTC'

USE_I18N = True

USE_L10N = True

USE_TZ = True


# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/3.0/howto/static-files/

STATIC_URL = '/static/'
AUTH_USER_MODEL = 'users.CustomUser'
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]

STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
LOGIN_REDIRECT_URL = 'home'
LOGOUT_REDIRECT_URL = 'home'

CRISPY_TEMPLATE_PACK = 'bootstrap4'

EMAIL_BACKEND = 'django.core.mail.backends.console.EmailBackend'
'''EMAIL_HOST = 'smtp.sendgrid.net' 
EMAIL_HOST_USER = 'apikey' 
EMAIL_HOST_PASSWORD = 'my_sendgrid_password'
EMAIL_PORT = 587
EMAIL_USE_TLS = True
#ACCOUNT_EMAIL_VERIFICATION = 'none'
'''
#views.py
from django.urls import reverse_lazy
from django.views.generic import CreateView
from .forms import CustomUserCreationForm

# Create your views here.


class SignUpView(CreateView):
    form_class = CustomUserCreationForm
    success_url = reverse_lazy('login')
    template_name = 'signup.html

登录,注销等都在模板注册中。

#project_urls.py
"""helloworld_project URL Configuration

The `urlpatterns` list routes URLs to views. For more information please see:
    https://docs.djangoproject.com/en/3.0/topics/http/urls/
Examples:
Function views
    1. Add an import:  from my_app import views
    2. Add a URL to urlpatterns:  path('', views.home, name='home')
Class-based views
    1. Add an import:  from other_app.views import Home
    2. Add a URL to urlpatterns:  path('', Home.as_view(), name='home')
Including another URLconf
    1. Import the include() function: from django.urls import include, path
    2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
"""
from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('users/', include('users.urls')),
    path('users/', include('django.contrib.auth.urls')),
    path('', include('pages.urls')),

    #path('accounts/', include('django.contrib.auth.urls')),
    #path('accounts/', include('accounts.urls')),
    #path('', include('blog.urls')),
    #path('', include('posts.urls')),
    #path('', include('page.urls')),
    #path('', include('pages.urls')),

]

最后下面是app_level url

#app_urls.py
from django.urls import path


from .views import SignUpView


urlpatterns = [
    path('signup', SignUpView.as_view(), name='signup'),
]
django bootstrap-4
1个回答
0
投票

下载Jquery和Popper JS,并将其放在静态文件夹中。


0
投票

我曾经遇到过这样的问题:希望我的解决方案对你有用。

你在html文件中使用的jquery库(jquery-.slim.min.js)可能不包含创建下拉效果所需的功能,请使用jquery.min.js代替。

从你的html文件中删除它。

<script src="https://code.jquery.com/jquery-...slim.min.js" integrity="sha-qi/X+DzOrTabKJStQIAqVgRVzpbzosmXKp\ YfRvH+abtTEPijizo" crossorigin="anonymous"></script>

然后使用下面的jquery.min:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

连接到互联网并刷新。

P:S你也可以到以下地址下载jquery.min.js。jquery,只有87kb左右。然后把代码复制下来,保存为jquery.min.js在你的静态文件夹里,然后像这样连接到你的模板里。

<script src="{% static 'jquery.min.js' %}"></script>

然后你就不需要网络就能使用了 我想是你使用的jquery库的问题。


0
投票

我以前也遇到过这种情况,我的解决方法是简单的放置Jquery,然后是Popper js,接着是Boostrap js------依次放置,我发现下拉功能是依赖于Popper和Jquery的。

看你的代码,我看到你是按照这个顺序来的,但是我不清楚你用django加载boostrap的方式。

请下载boostrap cdn,(和你下载Popper和Jquery的地方一样),重启服务器,用SHIFT + F5清除浏览器缓存,然后再试一次。

确保你有网络连接。


0
投票

这是一个错误,在第23行。分号被我放错了。enter image description hereenter image description hereThis is what happened at line 23

© www.soinside.com 2019 - 2024. All rights reserved.