Django中的Bootstrap和管理css冲突答案

【问题标题】：Conflicting Bootstrap and admin css in DjangoDjango中的Bootstrap和管理css冲突
【发布时间】：2013-03-02 21:50:03
【问题描述】：

我正在使用带有 Django 的 Bootstrap，以及来自管理员的 css（用于日期小部件）。我的问题是，在我有日期小部件的页面上，管理员 css 会覆盖引导 css，因此整个页面看起来不同。我该如何解决？

base.html

<head>

     {% block extra_head %}
     {% endblock %}

    <link href="{{ STATIC_URL }}bootstrap/css/bootstrap.css" rel="stylesheet" media="screen">

    <link href="{{ STATIC_URL }}bootstrap/css/bootstrap-responsive.css" rel="stylesheet">

</head>

带有日期小部件的模板

{% extends "base.html" %}
{% load adminmedia %}

{% block extra_head %}

  <link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}admin/css/base.css"/>
  <link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}admin/css/widgets.css"/>

  <script type="text/javascript" src="/admin/jsi18n/"></script>
  <script type="text/javascript" src="{{ STATIC_URL }}admin/js/core.js"></script>
  <script type="text/javascript" src="{{ STATIC_URL }}admin/js/admin/RelatedObjectLookups.js"></script>
  <script type="text/javascript" src="{{ STATIC_URL }}admin/js/jquery.js"></script>
  <script type="text/javascript" src="{{ STATIC_URL }}admin/js/jquery.init.js"></script>
  <script type="text/javascript" src="{{ STATIC_URL }}admin/js/actions.js"></script>
  <script type="text/javascript" src="{{ STATIC_URL }}admin/js/calendar.js"></script>
  <script type="text/javascript" src="{{ STATIC_URL }}admin/js/admin/DateTimeShortcuts.js"></script>

  <script type="text/javascript">window.__admin_media_prefix__ = "{% filter escapejs %}{% admin_media_prefix %}{% endfilter %}";</script>

{% endblock %}

【问题讨论】：

标签： css django twitter-bootstrap django-admin

【解决方案1】：

将引导 css 放入 {% block extra_head %}{% endblock %}。不用担心，只要你没有调用{{block.super}}，bootstrap 就不会被激活。

<head>
     {% block extra_head %}
     <link href="{{ STATIC_URL }}bootstrap/css/bootstrap.css" rel="stylesheet" media="screen">
     <link href="{{ STATIC_URL }}bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
     {% endblock %}
</head>

要激活其他模板中的引导程序，只需输入{{block.super}}：

{% extends "base.html" %}

{% block extra_head %}
    {{block.super}}
    //other css here
{% endblock %}

更新：

覆盖管理员现有的 css。在您的引导 css 中，您必须输入 !important 以便它强制您的模板遵循引导设计

示例：

<p>This red text <strong style="color: red;">should be blue</strong></p>

<style>
   strong { color: blue !important; }
</style>

【讨论】：

引导程序已激活，但问题是管理员 css 覆盖了字体等。我希望引导 css 覆盖管理员 css 中的样式。
你需要把 !important 放在 css boottstrap 中，这样它就会强制它遵循 bootstrap 设计