Twitter引導縮略圖不並排

Question

    <article <?php post_class(); ?>>
      <header>
        <div class="container">
         <div class="row">
            <div class="col-sm-6 col-md-3">
             <div class="thumbnail">
                <?php if(has_post_thumbnail()) : ?>
                     <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" >
                    <?php the_post_thumbnail(); ?>
                       </a>
                  <?php endif; ?>
                <div class="caption">
                     <h3 class="thumbnail-label"><a class="" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                    <?php get_template_part('templates/entry-meta'); ?>
                     <div class="entry-summary">
                    <?php the_excerpt(); ?>
                      </div>
      </header>
                </div>
              </div>
            </div>
          </div>
        </div>
    </article>

即時通訊有麻煩讓它們並排對齊。 他們所做的只是彼此疊放，我似乎無法讓它們並排。

這是它看起來像http://getbootstrap.com/components/#thumbnails的樣子

Answer 1

您似乎太早關閉<header>標記。 請嘗試以下標記：

<article <?php post_class(); ?>>
    <header>
        <div class="container">
            <div class="row">
                <div class="col-sm-6 col-md-3">
                    <!-- Your thumbnail code goes here. -->
                </div>
            </div>
        </div>
    </header>
</article>

注意：如果在循環中使用此代碼，則可以解釋為什么縮略圖會堆疊。

Answer 2

假設<article>標記包含已循環的元素，則循環的內容過多。 您的標記應為：

{outside_element}
    {loop}
        {looped_element}
    {/loop}
{/outside_element}

通過3次迭代運行此命令將為您提供：

{outside_element}
    {looped_element}
    {looped_element}
    {looped_element}        
{/outside_element}

現在您會得到：

{outside_element}
    {looped_element}        
{/outside_element}
{outside_element}
    {looped_element}        
{/outside_element}
{outside_element}
    {looped_element}        
{/outside_element}