使用 Bootstrap 在 2 列中显示 Wordpress 帖子

Question

我使用引导程序，我想在我的 index.php 页面上的两列中显示我的 Wordpress 帖子。我只显示我的帖子的 the_permalink，我希望它们按水平顺序排列。 当页面从 xs 屏幕加载时，我希望将帖子放在一列中，彼此重叠。 我尝试了许多不同的东西，但我无法获得正确的 php 代码。我从头开始，这是我现在拥有的代码：

<?php if (have_posts()):  ?>

<div class="container">
  <?php while(have_posts()): the_post(); ?>

  <div class="row">
    <div id="post_title_overview_page">
      <div class="col-lg-12 col-md-12 col-xs-12">
        <a href="<?php the_permalink(); ?>"><?php $first = str_replace(' | ', '<br />', get_the_title()); echo str_replace('REPLACE_ME', '<i>REPLACE_ME</i>', $first);?></a>
      </div>
    </div>
  </div>


  <?php endwhile; ?>
</div>

<?php else: ?>
<div class="row">
  <div class="col-xs-12">
    <p>no result</p>
  </div>
</div>

<?php endif; ?>

非常感谢您的帮助！非常感谢！

Answer 1

您使用的类不正确。使用以下

<div class="col-lg-6 col-md-6 col-xs-12">
        <a href="<?php the_permalink(); ?>"><?php $first = str_replace(' | ', '<br />', get_the_title()); echo str_replace('REPLACE_ME', '<i>REPLACE_ME</i>', $first);?></a>
      </div>

col-lg-* 用于更大的屏幕

col-md-* 用于中等屏幕

col-xs-* 用于小屏幕

由于您希望在大型设备上并排放置两个 div，因此使用 lg-6，而在小型设备上您只需要一个 div，因此使用 xs-12