在Wordpress中使用Bootstrap在索引上显示两列文章


Two-column post display on index with Bootstrap in Wordpress

目前,我正在尝试在索引页面上使用两列的post显示布局,但不幸的是,我的尝试似乎都不起作用。我的想法是让它们像这样显示:

第一条 nbsp nbsp 第二条
第三条 nbsp nbsp;第四条
第五条 nbsp nbsp 第六条

相反,它们是这样显示的:

第一条
第二条
第三条

等等。在我的content.php文件中,以下是我的代码:

<?php
/**
 * @package dazzling
 */
?>
  <div class="row"> <div class="col-sm-12 col-md-6">
    <div class="thumbnail" style="padding: 0px;">
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <div class="caption"><header class="entry-header page-header">
        <h3><a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a> <small style="color: inherit;"><li class="glyphicon glyphicon-new-window"></li></small></h3>
        <?php if ( 'post' == get_post_type() ) : ?>
        <small class="entry-meta">
            <?php dazzling_posted_on(); ?><?php if ( ! post_password_required() && ( comments_open() || '0' != get_comments_number() ) ) : ?>
        <span class="comments-link"><li class="glyphicon glyphicon-comment"></li> <?php comments_popup_link( __( 'Leave a comment', 'dazzling' ), __( '1 Comment', 'dazzling' ), __( '% Comments', 'dazzling' ) ); ?></span>
        <?php endif; ?>
        <?php if ( 'post' == get_post_type() ) : // Hide category and tag text for pages on Search ?>
            <?php
                /* translators: used between list items, there is a space after the comma */
                $categories_list = get_the_category_list( __( ', ', 'dazzling' ) );
                if ( $categories_list && dazzling_categorized_blog() ) :
            ?>
            <span class="cat-links"><li class="glyphicon glyphicon-folder-open"></li>&nbsp; 
                <?php printf( __( ' %1$s', 'dazzling' ), $categories_list ); ?>
            </span>
            <?php endif; // End if categories ?>
        <?php endif; // End if 'post' == get_post_type() ?>
        <?php edit_post_link( __( 'Edit', 'dazzling' ), '<li class="glyphicon glyphicon-pencil"></li> <span class="edit-link">', '</span>' ); ?>
        </small><!-- .entry-meta -->
        <?php endif; ?>
    </header><!-- .entry-header -->
    <?php if ( is_search() ) : // Only display Excerpts for Search ?>
        <?php the_excerpt(); ?>
        <p><a class="btn btn-default read-more" href="<?php the_permalink(); ?>"><?php _e( 'Continue reading', 'dazzling' ); ?> <span class="glyphicon glyphicon-chevron-right"></span></a></p>
    </div><!-- .entry-summary -->
    <?php else : ?>
        <?php if ( has_post_thumbnail()) : ?>
        <a href="<?php the_permalink(); ?>" style="float: left; margin-right: 10px;" title="<?php the_title_attribute(); ?>">
            <?php the_post_thumbnail( 'medium', array( 'class' => 'img-thumbnail' )); ?>
        </a>
    <div class="caption">
            <?php the_excerpt(); ?>
        </div> 
        <?php else : ?>
            <?php the_excerpt(); ?>         
        <?php endif; ?>
        <p><a class="btn btn-default read-more" href="<?php the_permalink(); ?>"><?php _e( 'Continue reading', 'dazzling' ); ?> <span class="glyphicon glyphicon-chevron-right"></span></a></p>
        <a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>"></a> 

        <?php
            wp_link_pages( array( 
                'before'            => '<div class="page-links">'.__( 'Pages:', 'dazzling' ),
                'after'             => '</div>',
                'link_before'       => '<span>',
                'link_after'        => '</span>',
                'pagelink'          => '%',
                'echo'              => 1 
            ) );
        ?>
    </div><!-- .entry-content -->
    <?php endif; ?>
    <br>
</article></div></div></div>
<!-- #post-## -->

如果我在这里做错了什么,你们能解释一下吗?非常感谢。

最简单的解决方案可能是CSS方法。如果你为页面上打印的每一篇文章分配一个类,那么你可以将一半浮动到右边,一半浮动到左边。这里有一个例子:

示例HTML

<div class="wrapper">
    <div class="post">Sample Post 1 Content</div>
    <div class="post">Sample Post 2 Content</div>
    <div class="post">Sample Post 3 Content</div>
    <div class="post">Sample Post 4 Content</div>
    <div class="post">Sample Post 5 Content</div>
    <div class="post">Sample Post 6 Content</div>
</div>

对应的CSS

.post:nth-child(odd) {
    float:left;
    width:50%;
}
.post:nth-child(even) {
    float: right;
    width:50%;
}

这里有一个演示,您可以在其中看到这种方法的实际操作。