こんにちわ。どなたかご存知でしたら、ご教示願います。
wordpressにbootstrap4のカードを使い、3カラム構成のレイアウトをおこないたいです。
イメージの通り、IE10で表示すると3カラムで並ぶのですが、chromeで表示すると
paddingとpaddingの間(bootstrap標準の値15px)に不明な余白が存在し、2カラム構成になってしまいます。
分かりづらい説明で恐縮ですが、どなたかご教示願います。
/* Template Name: コンテンツページ */ ?> <?php get_header(); //header.phpを取得 ?> <div class="contents-bg"> <div class="syasen-bg"> </div> </div> <div class="container"> <div class="row text-center"> <div class="col-12"> <h2 class="black">タイトルタイトルタイトル</h2> <p><span class="seminor-bg">テキストテキストテキスト</span>テキストテキストテキスト</p> </div> </div> </div> <!-- コンテンツ –––––––––––––––––––––––––––––––––––––––––––––––––– --> <div class="container"> <div class="row"> <?php if ( have_posts() ) : // ?> <?php // --------- 新着情報をすべて表示 --------- $args = array( 'category_name' => 'contents', 'posts_per_page' => -1 ); $the_query = new WP_Query( $args ); if ( $the_query->have_posts() ) ;?> <?php while ( $the_query->have_posts() ) : $the_query->the_post();?> <!-- コンテンツ一覧 –––––––––––––––––––––––––––––––––––––––––––––––––– --> <div class="col-md-4 col-lg-4 card-original"<?php post_class(); ?>> <a href="<?php the_permalink(); //投稿 のリンクを取得 ?>"> <p class="eyecatchlabel"> <?php $posttags = get_the_tags(); if ($posttags) { foreach($posttags as $tag) { echo $tag->name . ' '; } } ?></p> <img class="card-img-top"<?php echo get_the_post_thumbnail($post->ID, 'size1'); ?> <h5 class="sales-title"><?php the_title(); //投稿(固定ページ)のタイトルを表示 ?></h5> <p class="card-dot"><?php the_excerpt(); //投稿(固定ページ)の要約を表示 ?></p></a> </div> <?php endwhile; // 繰り返し終了 ?> <?php else : //条件分岐:投稿が無い場合は ?> <h2>投稿がみつかりません。</h2> <p><a href="<?php echo home_url(); ?>">トップページに戻る</a></p> <?php endif; //条件分岐終了 ?> </div> </div> <?php get_footer(); //footer.phpを取得 コード
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。