Question

我试图让Zurb的基金会像我在youtube上看到的一样工作，以及演示如何运作我得到了演示版index.html正常工作

屏幕不会按照它应该缩放

这是我的skeleton.html

{% load zinnia_tags i18n %}
{% load url from future %}
{% get_tags as entry_tags %}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xml:lang="{{ LANGUAGE_CODE }}" lang="{{ LANGUAGE_CODE }}" version="-//W3C//DTD XHTML 1.1//EN" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>{% block title %}{% endblock %}</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta http-equiv="cache-control" content="public" />
    <meta name="robots" content="follow, all" />
    <meta name="language" content="{{ LANGUAGE_CODE }}" />
    <meta name="viewport" content="width=device-width">
    <meta name="description" content="{% block meta-description %}Time Tool,TimeBank,Barter{% endblock %}" />
    <meta name="keywords" content="{% block meta-keywords %}Time Trade Barter {{ entry_tags|join:", "}}{% endblock %}" />
    <meta name="author" content="Brian Scott Carpenter" />
    {% block meta %}{% endblock %}
    <link rel="shortcut icon" href="{{ STATIC_URL }}img/favicon.ico" />
    <link rel="home" href="{% url "home" %}" />

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="{{ STATIC_URL }}stylesheets/app.css">


   <script src="{{ STATIC_URL }}javascripts/vendor/custom.modernizr.js"></script>

    <link href='http://fonts.googleapis.com/css?family=Jolly+Lodger' rel='stylesheet' type='text/css'>  

    <!--[if lt IE 8]>
        <link rel="stylesheet" type="text/css" media="screen, projection" href="{{ STATIC_URL }}/css/ie.css" />
    <![endif]-->
    {% block link %}{% endblock %}
    {% block script %}{% endblock %}
  </head>
  <body class="skeleton {% block body-class %}{% endblock %}">

        {% block header %}{% endblock%}

    <div class="row">
      <div class="small-8 columns">
        <div class="panel">
            {% block content %}{% endblock %}
        </div>
      </div>
      <div class ="small-4 columns">
        {% block sidebar %}{% endblock %}
      </div>
    </div>



    {% if messages %}
      <ul class="messages">
        {% for message in messages %}
           <li id="message_{{ forloop.counter }}"
             {% if message.tags %} class="{{ message.tags }}"
     {% endif %}>
          {{ message }}

      </li>
    {% endfor %}
    </ul>
  {% endif %}


    </div>

        {% block footer %}{% endblock %}
    </div>

  <script>
  document.write('<script src=' +
  ('__proto__' in {} ? 'javascripts/vendor/zepto' : 'javascripts/vendor/jquery') +
  '.js><\/script>')
  </script>

  <script src="javascripts/foundation/foundation.js"></script>

  <script src="javascripts/foundation/foundation.reveal.js"></script>

  <script src="javascripts/foundation/foundation.topbar.js"></script>

  <script src="javascripts/foundation/foundation.interchange.js"></script>

  <script src="javascripts/foundation/foundation.forms.js"></script>

  <script src="javascripts/foundation/foundation.placeholder.js"></script>

  <script src="javascripts/foundation/foundation.tooltips.js"></script>

  <script src="javascripts/foundation/foundation.joyride.js"></script>

  <script src="javascripts/foundation/foundation.cookie.js"></script>

  <script src="javascripts/foundation/foundation.clearing.js"></script>

  <script src="javascripts/foundation/foundation.alerts.js"></script>

  <script src="javascripts/foundation/foundation.dropdown.js"></script>

  <script src="javascripts/foundation/foundation.orbit.js"></script>

  <script src="javascripts/foundation/foundation.abide.js"></script>

  <script src="javascripts/foundation/foundation.magellan.js"></script>

  <script src="javascripts/foundation/foundation.section.js"></script>


  <script>
    $(document).foundation();
  </script>
</body>
</html>

base.html文件

{% extends "skeleton.html" %}
{% load zinnia_tags i18n %}
{% load url from future %}
{% load postman_tags %}
{% block title %}Tempilo{% endblock %}


        {% block header %}

<nav class="top-bar" data-topbar>
    <ul class="title-area">
        <li class="name">
             <h1><li><a href="{% url "home" %}">{% trans "Home" %}</a></li></h1>
         </ul>
        <section class="top-bar-section">
            {% if user.is_authenticated %}
                {% trans "Logged in" %}: {{ user.username }} 

                <ul class="right">
                    <li><a href={% url "postman_inbox" %}> {% trans "Inbox" %}</a></li>
                    <li><a href="{% url "auth_logout" %}">{% trans "Log out" %}</a></li>
            {% else %}
                <ul class="right">

                     <li><a href="{% url "auth_login" %}">{% trans "Log in" %}</a></li>
            {% endif %}

                </ul>
        </ul>

        </div>
      <h1>Tempilo<small> It's a Time tool</small></h1>
      <hr />
</div>

  <!-- End Nav -->

        {% endblock %}


{% block sidebar %}
    <div class="side-nav right">
    <ul class="button-group">

        <li><a href="{% url "oferto_createview" %}">{% trans "Create an Offer" %}</a></li>
        <li class="divider"></li>

        <li><a href="{% url "oferto_listview" %}">{% trans "See the Offer's" %}</a></li>
        <li class="divider"></li>
        <li class="divider"></li>


        <li><a href="{% url "transaction_list" %}">{% trans "Transaction List" %}</a></li>
        <li class="divider"></li>

        <li><a href="{% url "peto_createview" %}">{% trans "Create a Request" %}</a></li>
        <li class="divider"></li>

        <li><a href="{% url "peto_listview" %}">{% trans "See the Requests" %}</a></li>
        <li class="divider"></li>

    </ul>
    </div>
    </div>
    </div>


{% endblock %}
    {% block content %} {% endblock %}

        {% block footer %}
            <div id="footer">
                <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by-sa/4.0/88x31.png" /></a><br /><span xmlns:dct="http://purl.org/dc/terms/" property="dct:title">Tempilo</span> by <a xmlns:cc="http://creativecommons.org/ns#" href="https://bitbucket.org/BrianScottCarpenter/tempilo" property="cc:attributionName" rel="cc:attributionURL">Leprechaun King</a> is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/">Creative Commons Attribution-ShareAlike 4.0 International License</a>.<br />Based on a work at <a xmlns:dct="http://purl.org/dc/terms/" href="https://bitbucket.org/BrianScottCarpenter/tempilo" rel="dct:source">https://bitbucket.org/BrianScottCarpenter/tempilo</a>.
                <a href="http://info.flagcounter.com/bLXn"><img src="http://s06.flagcounter.com/count/bLXn/bg_FFFFFF/txt_000000/border_CCCCCC/columns_8/maxflags_250/viewers_0/labels_0/pageviews_0/flags_0/" alt="Flag Counter" border="0"></a>
                <script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-47015323-1', 'bitbucket.org');
  ga('send', 'pageview');

</script>
            </div>
        {% endblock %}


</body>

</html>

Answer 1

您在base.html中的HTML无效。错误包括：

您的侧边栏中似乎没有打开div标签的结束div。
标题栏中有一个没有结束标记的开头<li>。
标题栏中没有结束</section>标记。
底部有一个无关的</body></html>。

修复HTML中的所有错误并重试。

Zurb Foundation没有缩放到屏幕尺寸

1 个答案: