WordPress изображения, которые будут показаны с col-md-4

Привет всем, у меня есть несколько изображений, загруженных в пользовательский тип записи в качестве избранного изображения в котором я пытаюсь подключиться начальная загрузка с WordPress и отображать изображения рядом Col-мкр-4. но когда я это делаю, он отображает изображения в новом ROW, а не col-md-4

код …

      <?php $loop = new WP_Query( array( 'post_type' => 'portfolio_col_image', 'orderby' => 'post_id' ) );
while($loop->have_posts()) : $loop->the_post(); ?>




<?php
// Must be inside a loop.

if ( has_post_thumbnail() ) { ?>
<div class = "portfolio-column-box">
<div class = "container">

<div class = "col-md-4">
<?php the_post_thumbnail('large', array( 'class'  => 'img-thumbnail'  ) ); ?>
</div>
</div>
</div>

<?php };
?>

</div>
</div>


<?php endwhile; ?>

0

Решение

У вас проблема с циклом, контейнер должен быть снаружи, пока цикл

      <div class = "container">
<?php $loop = new WP_Query( array( 'post_type' => 'portfolio_col_image', 'orderby' => 'post_id' ) );
while($loop->have_posts()) : $loop->the_post(); ?>
<?php
// Must be inside a loop.

if ( has_post_thumbnail() ) { ?>
<div class = "portfolio-column-box">
<div class = "col-md-4">
<?php the_post_thumbnail('large', array( 'class'  => 'img-thumbnail'  ) ); ?>
</div>
</div>
</div>

<?php };
?>

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

вышеприведенное решение основано на версии начальной загрузки 3

если вы используете bootstrap 4, то вам нужно также включить «row», как показано ниже

<div class="container">
<div class="row">
//your loop here
1

Другие решения

Вы использовали строка вне col-md-4 ??

0

Bootstrap 4 использует «Flex» для разделения на столбцы, поэтому нам нужно использовать строка Перед использованием седло
Предыдущая версия начальной загрузки использовала float для седло так что это будет работать без строка.

<div class = "portfolio-column-box">
<div class = "container">
<div class="row">
<?php
$loop = new WP_Query( array( 'post_type' => 'product', 'orderby' => 'post_id' ) );
while($loop->have_posts()) : $loop->the_post();
// Must be inside a loop.
if ( has_post_thumbnail() ) { ?>
<div class = "col-md-4">
<?php the_post_thumbnail('large', array( 'class'  => 'img-thumbnail'  ) ); ?>
</div>
<?php };
endwhile; ?>
</div>
</div>
</div>

Надеюсь, это исправит вашу проблему.

0

Вы указываете Col-мкр-4 который покажет 3 столбца в строке (подробности), и когда в каждой строке будет по 3 столбца, новая строка должна динамически начинаться, и изображение будет отображаться в правильной сетке. Попробуйте код ниже и посмотрите

<?php
$loop = new WP_Query( array( 'post_type' => 'portfolio_col_image', 'orderby' => 'post_id' ) );
$i = 0;
?>
<div class="row">;
<?php
while($loop->have_posts()) : $loop->the_post();
?>
<div class="vc_col-md-4">
<?php
//print your image here
?>
</div>
<?php
$i++;
if ($i % 3 == 0) {
?>
</div><div class="row">
<?php
}
endwhile;
?>
</div>
0
По вопросам рекламы [email protected]