Проблема с выравниванием флюидов TB из hyde сгенерированного кода

Question

У меня есть responsive blog archives layout, который страдает от проблем с выравниванием, но я не уверен, какой элемент должен быть нацелен на устранение проблемы.

В связанном jsFiddle example, регулировка ширины создает отзывчивый макет, но список сообщений в блоге не соответствует правильному выравниванию.

Приведенный ниже код от генератора статического сайта hyde, похоже, содержит избыточные теги <p>, в которых я не уверен, что его необходимо устранить или если потребуется некоторые корректировки CSS.

{% extends "base.j2" %} 
{% from "macros.j2" import render_excerpt with context %} 
{% block main %} 
{% block page_title %} 

<h1 class="title"></h1> 

    <div class="page-header"> 
    <h1>{{ resource.meta.title }}</h1> 
    </div> 


{% endblock %} 


    <div class="row-fluid"> 

    {% for res in resource.node.walk_resources_sorted_by_time() %} 


    {% refer to res.url as post %} 

     <div class="span4"> 
       <a href="{{ content_url(res.url) }}"><h2>{{ res.meta.title }}</h2></a> 

    <a href="{{ content_url(res.url) }}" class="postpic">{{ post.image|markdown|typogrify }}</a> 

{{ res.meta.excerpt|markdown|typogrify }} 

       <p><a class="btn" href="{{ content_url(res.url) }}">View details &raquo;</a></p> 
      </div><!--/span--> 

    {% endfor %} 

      </div><!--/row--> 


{% endblock %} 

Answer 1

Если вы хотите, чтобы построить сетку лучше всего, что каждый 3 span4 вы создаете новую строку-жидкость ниже другого. Например:

<div class="row-fluid"> 
    <div class="span12"> //These two row are our flexible container 
    /GENERATE WITH YOUR CODE THIS STUCTURE UNDER EVERY 3 POST/
    <div class="row-fluid"> 
     <div class="span4"></div> 
     <div class="span4"></div> 
     <div class="span4"></div> 
    </div> 

Я использую PHP для этого, но я думаю, что это небольшая ошибка логической структуризации вашего HTML в цикле!