Conservar los estilos de una plantilla Bootstrap en una aplicación Django

Buen día gente. Estoy haciendo un proyecto de practica en Django sobre una página web elemental. Soy algo torpe desarrollando front-end por lo que vi sencillo descargar un tema de Bootstrap de licencia abierta para probar con el en primera instancia.

Mi problema radica en algo "aparentemente" sencillo; al haber declarado una clase a la cual llamé products me dí libertad a citar en mi plantilla el tag que me permite usar las variables que declaré a partir del models.py que acabo de enlazar en este archivo views.py. No tengo inconvenientes convocando ningún contexto, sin embargo al momento de hacerlo con el de las imágenes obtengo este pequeño traspié de formato:

Como pueden observar cuando doy uso de la iteración de contenido por parte del tag que definí dentro de la plantilla, todas las imágenes me sale de forma verticalmente lineal y no en forma de grilla o rejilla como el original.

Tengo la certeza de que necesito tocar algo en el código HTML. Tal vez alguna clase de algún <div> o bien algo en el CSS. Francamente voy a ciegas con el HTML y me sería de gran ayuda cualquier aporte.

Les agradezco amablemente algo de orientación.

Respuestas

Aparentemente, el problema está en la forma en la que recorres la variable products. Tu código es más o menos así:

{% for Product in products %}
    <div class=" portfolio-page portfolio-4column">
        <ul id="portfolio-list" data-animated="fadeIn">
            <li>
                <!-- datos del producto -->
            </li>
        </ul>
    </div>
{% endfor %}

Este código genera el siguiente código HTML:

<div class=" portfolio-page portfolio-4column">
    <ul id="portfolio-list" data-animated="fadeIn">
        <li>
            Producto 1
        </li>
    </ul>
</div>
<div class=" portfolio-page portfolio-4column">
    <ul id="portfolio-list" data-animated="fadeIn">
        <li>
            Producto 2
        </li>
    </ul>
</div>
<div class=" portfolio-page portfolio-4column">
    <ul id="portfolio-list" data-animated="fadeIn">
        <li>
            Producto N
        </li>
    </ul>
</div>

Sin embargo, lo que necesitas generar es lo siguiente:

<div class=" portfolio-page portfolio-4column">
    <ul id="portfolio-list" data-animated="fadeIn">
        <li>
            Producto 1
        </li>
        <li>
            Producto 2
        </li>
        <li>
            Producto N
        </li>
    </ul>
</div>

Así que la solución consiste en cambiar el código de tu plantilla Django por lo siguiente:

<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>

@javiereguiluz

17 marzo 2015, 15:00

Hombre amigo pues era eso, tenías absoluta razón, estaban mal posicionados los tags, te agradezco un montón :D

@AlexDamas

17 marzo 2015, 15:05

Eso nos ha pasado a todos, si ves que hace cosas raras firebug es tu amigo y siempre que te quedes atascado en cosas visuales, entre el firebug y echarle un vistazo al codigo, suele ayudar.

Te lo digo por experiencia.

@TsubasaAkai

17 marzo 2015, 17:50

Hola estoy apenas comenzando con Django tengo que entregar un projecto y he bajado mucho pero cuando lo inicio no aparece nada. ¿Ustedes me pueden ayudar con proyecto, un ejemplo de algo que funcione? Gracias

@estibenlopez2

18 abril 2015, 23:05