2

私は 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 %}
4

1 に答える 1

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>

他のテンプレートでブートストラップを有効にするには、次のように入力するだけです{{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>
于 2013-03-14T14:00:01.437 に答える