Django中衝突Bootstrap和管理css

我使用Bootstrap與Django，以及從管理員（爲日期小部件）的css。我的問題是，在我有日期部件的頁面上，管理員的CSS會覆蓋引導CSS，因此整個頁面看起來不一樣。我該如何解決這個問題？Django中衝突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>

模板與日期控件，裏面{% block extra_head %}{% endblock %}

{% 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 %}

來源

2013-03-14 ana

認沽引導CSS。不要擔心，只要你沒有撥打{{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>

要激活其他模板bootsrap，只是簡單地說{{block.super}}：

{% extends "base.html" %} 

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

UPDATE：

要覆蓋管理現有的CSS。在你的引導CSS，你必須把!important，這樣它會迫使你的模板遵循引導設計

樣品：

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

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

來源

2013-03-14 14:00:01 catherine

自舉被激活，但問題是，管理CSS將覆蓋字體等我想引導CSS重寫管理CSS的樣式。 – ana 2013-03-14 14:11:57

您需要將'！important'放在CSS boottstrap中，這樣它會強制它遵循bootstrap設計 – catherine 2013-03-14 14:17:10

Django中衝突Bootstrap和管理css

回答

相關問題