django中的bootstrap 3的css没有按预期工作

Question

我想在我的django应用程序中使用tabbable div。切换似乎按预期工作，内容确实显示单击下一个选项卡时。

但CSS似乎没有起作用。当我单击tab2时，焦点仍然位于选项卡1.在选项卡2上，它只显示按钮，当我单击页面的其他部分时，灰色消失，即使显示tab2详细信息，焦点也是标签1。

只是在这里添加我的页面加载脚本

{% load bootstrap3 %}
{% bootstrap_css %}
{% bootstrap_javascript %}

在加载页面时，我检查了chrome dev工具中的源代码。在sources部分中，我可以看到jquery和bootstrap已加载。

Answer 1

如果您的CSS无效，请尝试收集静态文件：

python manage.py collectstatic

Answer 2

我能够让它发挥作用。我以为库没有正确加载。在某种程度上，由于库的导入方式，它们似乎无法正常工作。

这是我模板顶部的样子

{% load static %}
{% load staticfiles %}
{% static 'static_jquery/js/jquery.js' %}

{% block content %}

    {% load bootstrap3 %}
    {% bootstrap_css %}
    {% bootstrap_javascript %}

它对我有用的是，引导程序相关的库必须放在块内容中。之前，它在加载静态语句之后放置在顶部。

而且我还必须删除模板底部的硬编码脚本标签，然后才能工作。我删除了这些

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>

我做的其他事情是安装django_static_jquery，然后执行collectstatic