Django中的Bootstrap和Admin CSS冲突

Question

我正在将Bootstrap与Django以及管理员使用的CSS（用于日期小部件）一起使用。 我的问题是，在我拥有日期小部件的页面上，admin css覆盖了bootstrap 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 %}

Answer 1

将引导CSS放入{% block extra_head %}{% endblock %} 。 只要您没有调用{{block.super}} ，别担心，引导程序将不会被激活。

<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>

要激活其他模板中的bootsrap，只需将{{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>

Django中的Bootstrap和Admin CSS冲突

问题描述

1 个解决方案

解决方案1
1 2013-03-14 14:00:01

Django中的Bootstrap和Admin CSS冲突

问题描述

1 个解决方案

解决方案1 1 2013-03-14 14:00:01

解决方案1
1 2013-03-14 14:00:01