初歩的な質問で恐れ入ります。
###前提・実現したいこと
WordPress Bootstrapを利用して、投稿画像をグリッド配置、4列で表示を実現したいです。
下記コードをindex.phpに組み込んだところ、投稿画像は横ではなく左側に縦に積み重なってしまいます。
コードのミス、他のおかしい可能性がある部分を教えていただければ幸いです。
どうぞよろしくおねがい致します。
###該当のソースコード
<div class=”container”> <div class=”row”> <?php if (have_posts()) : ?> <?php while (have_posts()) : the_post(); ?> <div class="col-md-3"> <a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>"> <?php the_post_thumbnail(); ?></a> <?php if (get_post_meta($post->ID, "p-name", true)) : ?> <span class="p-name"><?php $key="p-name"; echo get_post_meta($post->ID, $key, true); ?></span> <?php else : ?><?php endif; ?></div> <?php endwhile; ?> <?php endif; ?></div></div>###補足情報(言語/FW/ツール等のバージョンなど)
functions.phpには下記を組み込んでます。
function my_bootstrap_scripts() {
wp_enqueue_style( 'bootstrap-css', get_template_directory_uri() . '/lib/bootstrap-3.3.2-dist/css/bootstrap.min.css');
wp_enqueue_script( 'bootstrap-script', get_template_directory_uri() . '/lib/bootstrap-3.3.2-dist/js/bootstrap.min.js', array(), '1.0.0', true );}
add_action( 'wp_enqueue_scripts', 'my_bootstrap_scripts' );
viewportは下記にしてます。
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
HTMLでは下記のように組んでグリッド配置にはできました。
<div class="container"> <div class="row"> <div class="col-md-3">image1</div> <div class="col-md-3">image2</div> <div class="col-md-3">image3</div> <div class="col-md-3">...</div> </div></div>回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/05/01 12:37
退会済みユーザー
2016/05/01 12:46
2016/05/01 13:04
退会済みユーザー
2016/05/01 13:34
2016/05/01 14:35