Question

我使用bootstrap，我想在index.php页面的两列中显示我的Wordpress帖子。我只显示我帖子的_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

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

1 个答案: