使用未正确对齐的引导程序在网格中显示 WordPress 帖子答案

【问题标题】：Display WordPress posts in grid using bootstrap not aligned properly使用未正确对齐的引导程序在网格中显示 WordPress 帖子
【发布时间】：2018-01-03 23:40:40
【问题描述】：

网格布局偶数列的博客帖子无法正确显示。3 列布局也会出现问题：对于每组 3 个帖子

<div class="main" role="main">
    <div id="content" class="content full">
        <div class="container">
            <?php if(have_posts()) : ?>
            <?php while(have_posts()) : the_post();
    $title = get_the_title();?>
            <div class="row">
                <?php if ( has_post_thumbnail() ) { ?>
                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                    <a href="<?php echo esc_url(get_permalink(get_the_ID())) ?><?php 
    the_post_thumbnail('imic_600x400'); ?></a>
    <?php } ?>
    <?php if ( has_post_thumbnail() ) { ?><?php } ?>
    <h3><a href=" <?php echo esc_url(get_permalink(get_the_ID())); ?>
                        <?php 
    echo esc_attr($title); ?>
                    </a>
                    </h3>

                </div>
                <?php endwhile; ?>
                <!-- Pagination -->
                <?php if(function_exists('imic_pagination')) { imic_pagination(); } 
    else { next_posts_link( 'Older Entries');
    previous_posts_link( 'Newer Entries' ); } ?>
                <?php endif;?>
            </div>
            <?php if(is_active_sidebar($pageSidebar)) { ?>
            <!-- Sidebar -->
            <div class="sidebar" id="sidebar-col">
                <?php dynamic_sidebar($pageSidebar); ?>
            </div>
            <?php } ?>
        </div>
    </div>
</div>

【问题讨论】：

标签： wordpress view grid posts

【解决方案1】：

尝试如下更改创建的 HTML 结构（在 Inspect Element 视图中验证它是否有效）：

<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
</div><!--
--><div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
</div><!--
--><div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
</div>

（注意 HTML cmets）

如果这样可以解决问题，请尝试将 HTML cmets 添加到您的 PHP 代码中。这种行为的原因是生成的新行被解释为“空格”，因此第三个项目将不适合同一行，因为添加了水平空间。

您也可以输出不带换行符的 HTML-<div class="row">...</div>，例如。通过将标记连接为一个 PHP 字符串。

【讨论】：