WordPressでカラム落ちしてしまいます

こんばんは、解決できないことがあり、質問させてください。

前提・実現したいこと

Bootstrapでモックアップを作成したのですが、これをWordPressで実現したい。

該当のソースコード

<div class="container">
  <div class="row">
    <div class="col-xl-3">Information</div>
    <div class="col-xl-9">
      <div class="row">
        <div class="col-xl-4">記事</div>
        <div class="col-xl-4">記事</div>
        <div class="col-xl-4">記事</div>
      </div>
    </div>
  </div>
</div>

WordPress php

<div class="col-md-9"> <section id="card-section"> <div class="row no-gutters"> <?php if(have_posts()): while(have_posts()): the_post(); ?> <div class="col-md-4 row-eq-height"> <div class="card"> <div class="nopadding example"> <img src="<?php the_post_thumbnail( 'large' ); ?> <p>NEW!!</p></div> <div class="card-body"> <h3 class="card-title"><?php the_title(); ?></h3> <p class="card-text"> <?php if(mb_strlen($post->post_content,'UTF-8')>100){ $content= str_replace('\n', '', mb_substr(strip_tags($post-> post_content), 0, 100,'UTF-8')); echo $content.'……'; }else{ echo str_replace('\n', '', strip_tags($post->post_content)); } ?></p> <a href="<?php the_permalink(); ?>" class="btn btn-primary">Go somewhere</a> </div> </div> </div> <?php endwhile; endif; ?> </div> </section> </div>

写真のようにBootstrapで書いたhtmlは記事部分が３カラム並ぶのですが、

Wordpressで書き出したサイトではカラム落ちしてしまいます。

試したこと

・タグ落ち
・WordPressのcssにメディアが切ってないか調べてみたのですが、該当しませんでした。

バージョン

Bootstrapは4.3.1

何卒、よろしくお願いいたします。

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

回答4件

html
1<img src="<?php the_post_thumbnail( 'large' ); ?>

は

html
1<img src="<?php the_post_thumbnail( 'large' ); ?>">

としてください。

投稿2019/07/30 04:35

YukiYamashina

総合スコア1011

fine2101

2019/07/30 07:04

ありがとうございます。タグ落ちしていました。

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

HTMLの時とWordpressの時でclassのつけ方が結構違ってますね。
とりあえず、HTMLの時と同じ構成でやってみてはいかがでしょう？
それでもダメなら、中の要素を一つずつ消してどこに原因があるのか探ってみる。
それでもダメならデベロッパーツールでHTMLと同じ幅が取れているか、CSSの指定が効いていない要素はないか？などなど、原因を掘り下げていくといいと思います。

投稿2019/07/29 22:14