WORDPRESSでのレイアウトについて

WORDPRESSのアーカイブページにて、以下のように書いたところ、画像が横並びではなく、縦一列になってしまいました。横に並ぶようにするにはどうしたら良いでしょうか。

<div class="mb-1 row mx-2">
　<div class="col-6 col-md-3 p-1  ">
 　<?php if(have_posts()): ?>
 　<?php while(have_posts() ): the_post();?>							

　　 <a href="<?php the_permalink(); ?>">
 　 <?php if ( has_post_thumbnail()) : ?>
 　 <?php	the_post_thumbnail('category-archive');?>

 　　<?php endif; ?>
 　　</a>
 　　<?php endwhile ; ?>
 　　<?php endif ; ?>
　</div>
</div>

HTMLではBOOTSTRAPを使って以下のようにレイアウトしました。

<div class="mb-1 row mx-2">
        <div class="col-6 col-md-3 p-1  ">
        <div class="product-list">
        <a href="#">
         <img  src="img/product-01.JPG" class="w-100">
        </a>
        </div>
      </div>

×4

</div>

宜しくお願いします。

kei344

2018/12/22 07:58

（質問文は編集できます）質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

sasai_tacos

2018/12/22 08:03

申し訳ございません。修正しましたので、もしよろしければご協力ください。

行動規範の内容に同意します

回答1件

ベストアンサー

提示のHTMLにするなら、ループの箇所がずれていますね。

PHP
1<div class="mb-1 row mx-2">
2 　<?php if(have_posts()): while(have_posts() ): the_post();?>
3　<div class="col-6 col-md-3 p-1  ">
4　　 <a href="<?php the_permalink(); ?>">
5 　 <?php if ( has_post_thumbnail()) : ?>
6 　 <?php    the_post_thumbnail('category-archive');?>
7 　　<?php endif; ?>
8 　　</a>
9　</div>
10 　　<?php endwhile ; endif ; ?>
11
12×4
13
14</div>