Щелкать сетку загрузочной сетки не выравнивается

Question

У меня проблема с выравниванием сетки. Вот HTML

<div class="span6" id="content"> 

     <!-- Category 2 is Programming category. --> 

     <?php $programming_posts = get_posts('2'); ?> 

     <div class="row-fluid"> 

      <?php foreach($programming_posts as $key => $post){ ?> 

      <div class="span6 well well-small" id="post-preview"> 

       <?php echo $post->post_excerpt;?> 

      </div> 

      <?php }?> 

     </div> 

    </div> 

Вот CSS-код

#post-preview{ 
border: 1px solid rgba(140,140,140,1); 
border-radius: 2px; 
max-height: 135px; 
min-height: 135px; 
margin-bottom: 5px; 

}

Как вы можете видеть, что первая строка не совпадает со строками, что приходит после него. Первая строка - это строка с правильным выравниванием. Я не уверен, как это исправить?

Answer 1

Вы HTML структура плохо, как row-fluid может иметь только максимум 12 столбцов, то есть в этом случае два <div class="span6 well well-small" id="post-preview"> элементов. Но в вашем случае, если вы добавляете все post-preview див к одному row-fluid

Вашего HTML должен быть структура должна быть как

<div class="row-fluid"> 
    <div class="span6 well well-small" id="post-preview1"> 
    </div> 
    <div class="span6 well well-small" id="post-preview2"> 
    </div> 
</div> 
<div class="row-fluid"> 
    <div class="span6 well well-small" id="post-preview1"> 
    </div> 
    <div class="span6 well well-small" id="post-preview2"> 
    </div> 
</div> 

Также в id should be unique in a document, у вас есть много div сек с идентификатором post-preview из-за петлей

Answer 2

подход A:

Поскольку у вас есть 4 блоков, вы можете использовать span3 класс:

<div class="span3 well well-small" id="post-preview"> 
    <?php echo $post->post_excerpt;?> 
</div> 

Подход B:

Если вы хотите сохранить ширину и отображать только пару блоков в одной строке, то вы можете разделить пары дивы в отдельный row-fluid (PHP код только для справки):

<div class="row-fluid"> 
    <div class="span6 well well-small" id="post-preview1"> 
     <?php echo $post->post_excerpt;?> 
    </div> 
    <div class="span6 well well-small" id="post-preview2"> 
     <?php echo $post->post_excerpt;?> 
    </div> 
</div> 
<div class="row-fluid"> 
    <div class="span6 well well-small" id="post-preview1"> 
     <?php echo $post->post_excerpt;?> 
    </div> 
    <div class="span6 well well-small" id="post-preview2"> 
     <?php echo $post->post_excerpt;?> 
    </div> 
</div>