Question

我是 Django 的新手，我遇到了Twitter Bootstrap 的媒体网格类的问题：而不是显示图库，我只能制作正常的图像列表。

我在Windows XP上使用Bootstrap 2.2.1和Django 1.4.1。我在我的项目文件夹中复制了Bootstrap文件，并制作了一个非常简单的HTML模板来测试Bootstrap的 media-grid 类。我的目标是从我的数据库中可视化一个简单的图像库。

媒体网格类的正确语法定义为here：

<ul class="media-grid">
  <li>
    <a href="#">
      <img class="thumbnail" src="http://placehold.it/330x230" alt="">
    </a>
  </li>
  <li>
    <a href="#">
      <img class="thumbnail" src="http://placehold.it/330x230" alt="">
    </a>
  </li>
</ul>

但是，如果我在简单的HTML模板中复制并粘贴相同的代码，并通过 views.py 文件中的 render_to_response 命令加载，则生成显示的页面仅包含正常的图像列表，每行一个，在每个图像之前具有普通点（如在每个标准列表中）。我可以在同一个项目中使用Bootstrap的Django类，这使我排除了我没有正确导入css文件。

我感觉Django在不注意 media-grid 的语法的情况下解释页面，并呈现图像列表。

我正在使用的简单HTML文件如下：

<!DOCTYPE html> 
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>{% block title %}To be defined{% endblock %}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

<!-- Le styles -->
<link href="{{STATIC_URL}}css/bootstrap.css" rel="stylesheet">
<style>
  body {
      padding-top: 80px;        
      padding-bottom: 40px;     
  }
</style>
<link href="{{STATIC_URL}}css/bootstrap-responsive.css" rel="stylesheet">

<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
 <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
 <script src="{{STATIC_URL}}js/jquery-1.8.1.min.js" type="text/javascript"></script>
   {% block extrahead %}
   {% endblock %}
 <script type="text/javascript">
   $(function(){
   {% block jquery %}
   {% endblock %}
   });
 </script>
</head>

<body>

  <ul class="media-grid">
    <li>
      <a href="#">
        <img class="thumbnail" src="http://placehold.it/330x230" alt="">
      </a>
    </li>
    <li>
      <a href="#">
        <img class="thumbnail" src="http://placehold.it/330x230" alt="">
      </a>
    </li>
  </ul>


</body>
</html>

我试图以不同的方式写下来，并且在线寻找解决方案2天失败了。如果您知道为什么此代码可能无法正常工作，请告诉我们。

提前感谢大家。

Answer 1

如果您使用的是比v1.4更新的Bootstrap版本，那么＆＃39; media-grid＆＃39;组件已重命名为＆＃39;缩略图＆＃39;。

http://twitter.github.com/bootstrap/components.html#thumbnails

Bootstrap的媒体网格类与Django？

1 个答案: