Question

我为我的练习项目下载了一个免费的bootstrap，bootstrao只有html代码，当然也有css样式，js和图像。我的问题是我在django上有一个项目，可以打印来自这样的标签的图像：

{% extends 'base.html' %}

{% block title %} Project Sample {% endblock %}

{% load static from staticfiles %}

{% block content %}

    <!-- Start Page Banner -->
    <div class="page-banner">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <h2>Portfolio</h2>
                    <p>Portfolio Subtitle</p>
                </div>
                <div class="col-md-6">
                    <ul class="breadcrumbs">
                        <li><a href="#">Home</a></li>
                        <li>Portfolio</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- End Page Banner -->

    <!-- Start Content -->
    <div id="content">
        <div class="container">
            {% for Product in products %}
            <div class=" portfolio-page portfolio-4column">
            <ul id="portfolio-list" data-animated="fadeIn">
                <li>
                    <img src="{{ Product.pimage0.url }}" alt="{{ Product.name }}" />
                    <div class="portfolio-item-content">
                        <span class="header">{{ Product.name }}</span>
                        <p class="body">{{ Product.size }}</p>
                    </div>
                    <a href="#"><i class="more">+</i></a>

                </li>
            </ul>
            </div>
            {% endfor %}
        </div>
    </div>
    <!-- End Content -->

{% endblock %}

当你看到我的模板时，它有我的base.py的遗产，有一个{% for Product in products %}标记，可以调用一些＆＃34;项目＆＃34;在这里成立：

models.py

from django.db import models
from django.template.defaultfilters import slugify

class Product(TimeStampModel):

    name = models.CharField(max_length=200, unique=True)
    slug = models.SlugField(editable=False)
    # Product Images
    pimage0 = models.ImageField(upload_to = 'prodimg')
    pimage1 = models.ImageField(upload_to = 'prodimg')
    pimage2 = models.ImageField(upload_to = 'prodimg')
    pimage3 = models.ImageField(upload_to = 'prodimg')
    # END Product Images
    size = models.CharField(max_length=50)
    content = models.TextField()
    # Product Stats
    tolerance = models.CharField(max_length=3)
    efficiency = models.CharField(max_length=3)
    performance = models.CharField(max_length=3)
    lowrad = models.CharField(max_length=3)
    # END Product Stats
    # Other Features
    protection = models.TextField()
    environments = models.TextField()
    # END Other Features
    # Key Features
    kfeature0 = models.ImageField(upload_to = 'kfeats')
    kfeature1 = models.ImageField(upload_to = 'kfeats')
    # END Key Features
    category = models.ForeignKey(Category)


    def save(self, *args, **kwargs):
        if not self.id:
            self.slug = slugify(self.name)
        super(Product, self).save(*args, **kwargs)

    def __str__(self):
        return self.name

导入该上下文时没有任何问题，但是当我这样做时，我会获得此打印：

enter image description here

这是原始模板视图（因为我想看看我的模板）：

enter image description here

如果我必须代表我的＆＃34;产品＆＃34;我怎么能实现我的印刷看起来像原始印刷品？表单标签上下文？，我相信这个问题适用于任何html配置，因为我看起来我的产品很好：

看看我的views.py如果是援助：

class SingleCatView(TemplateView):

    template_name = 'products/single_category.html'

    def get_context_data(self, **kwargs):
        context = super(SingleCatView, self).get_context_data(**kwargs)
        context['products'] = Product.objects.all().order_by('-created')[:6]
        context['categories'] = Category.objects.all()
        return context

最后这是模板的原始代码：

<!-- Start Content -->
        <div id="content">
            <div class="container">
                <div class=" portfolio-page portfolio-4column">

                    <ul id="portfolio-list" data-animated="fadeIn">
                    <li>
                        <img src="images/Portfolio/1.png" alt="" />
                        <div class="portfolio-item-content">
                            <span class="header">Town winter 2013</span>
                            <p class="body">web develpment, design</p>
                        </div>
                        <a href="#"><i class="more">+</i></a>

                    </li>
                    <li>
                        <img src="images/Portfolio/2.png" alt="" />
                        <div class="portfolio-item-content">
                            <span class="header">Quarterly Musashino</span>
                            <p class="body">web develpment, design</p>
                        </div>
                        <a href="#"><i class="more">+</i></a>

                    </li>
                    <li>
                        <img src="images/Portfolio/3.png" alt="" />
                        <div class="portfolio-item-content">
                            <span class="header">Mainichi April 2014</span>
                            <p class="body">web develpment, design</p>
                        </div>
                        <a href="#"><i class="more">+</i></a>

                    </li>
                    <li>
                        <img src="images/Portfolio/4.png" alt="" />
                        <div class="portfolio-item-content">
                            <span class="header">Shitamachi Rocket</span>
                            <p class="body">web develpment, design</p>
                        </div>
                        <a href="#"><i class="more">+</i></a>

                    </li>
                    <li>
                        <img src="images/Portfolio/5.png" alt="" />
                        <div class="portfolio-item-content">
                            <span class="header">Majesty express vol. 01</span>
                            <p class="body">web develpment, design</p>
                        </div>
                        <a href="#"><i class="more">+</i></a>

                    </li>
                    <li>
                        <img src="images/Portfolio/6.png" alt="" />
                        <div class="portfolio-item-content">
                            <span class="header">Monocle issue 69</span>
                            <p class="body">web develpment, design</p>
                        </div>
                        <a href="#"><i class="more">+</i></a>

                    </li>
                    <li>
                        <img src="images/Portfolio/7.png" alt="" />
                        <div class="portfolio-item-content">
                            <span class="header">Monocle issue 69</span>
                            <p class="body">web develpment, design</p>
                        </div>
                        <a href="#"><i class="more">+</i></a>

                    </li>
                    <li>
                        <img src="images/Portfolio/8.png" alt="" />
                        <div class="portfolio-item-content">
                            <span class="header">Monocle issue 69</span>
                            <p class="body">web develpment, design</p>
                        </div>
                        <a href="#"><i class="more">+</i></a>

                    </li>
                    <li>
                        <img src="images/Portfolio/9.png" alt="" />
                        <div class="portfolio-item-content">
                            <span class="header">Monocle issue 69</span>
                            <p class="body">web develpment, design</p>
                        </div>
                        <a href="#"><i class="more">+</i></a>

                    </li>
                    <li>
                        <img src="images/Portfolio/10.png" alt="" />
                        <div class="portfolio-item-content">
                            <span class="header">Monocle issue 69</span>
                            <p class="body">web develpment, design</p>
                        </div>
                        <a href="#"><i class="more">+</i></a>

                    </li>
                    <li>
                        <img src="images/Portfolio/11.png" alt="" />
                        <div class="portfolio-item-content">
                            <span class="header">Monocle issue 69</span>
                            <p class="body">web develpment, design</p>
                        </div>
                        <a href="#"><i class="more">+</i></a>

                    </li>
                    <li>
                        <img src="images/Portfolio/12.png" alt="" />
                        <div class="portfolio-item-content">
                            <span class="header">Monocle issue 69</span>
                            <p class="body">web develpment, design</p>
                        </div>
                        <a href="#"><i class="more">+</i></a>

                    </li>
                </ul>
                    <!-- End Portfolio Items -->

                </div>
            </div>
        </div>
        <!-- End Content -->

任何贡献都很好，谢谢评价！

Answer 1

您只需将ul更改为list-inline类型：

即可

<ul id="portfolio-list" class="list-inline" data-animated="fadeIn">

但是你应该首先阅读Bootstrap。它不会为你神奇地格式化你的模板。

我的建议只有在您的内容具有固定宽度且图片尺寸合适的情况下才能正常使用。

Answer 2

我回答我自己的问题，首先感谢rnevius，我的问题是将迭代标签放在模板中，我应该有这样的标签：

<div class=" portfolio-page portfolio-4column">
        <ul id="portfolio-list" data-animated="fadeIn">
        {% for Product in products %}
            <li>
                <img src="{{ Product.pimage0.url }}" alt="{{ Product.name }}" />
                <div class="portfolio-item-content">
                    <span class="header">{{ Product.name }}</span>
                    <p class="body">{{ Product.size }}</p>
                </div>
                <a href="#"><i class="more">+</i></a>

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

而不是我的上述问题所以我可以在良好的形式上复制原始风格。

根据我的模板格式容纳图像

2 个答案: