html5 — Как создать новую строку в Bootstrap 3 после 3 COLS с PHP?
Мне действительно нужна помощь здесь. Я конвертирую свой сайт из простого HTML в WordPress. Однако я заметил большую проблему, на статическом веб-сайте у меня есть ряд с 3 столбцами, который работает просто отлично. В WordPress я заметил, что строка не создает новую строку, просто продолжайте добавлять новый столбец рядом с третьим столбцом.
Как я могу это исправить с помощью петли или что-то?
Мой код:
<?php $query = new WP_Query(array('post_type' => 'wpa_diensten', 'posts_per_page' => -1)); ?>
<?php if($query->have_posts()): global $more; ?>
<?php while($query->have_posts()): $query->the_post(); $more = 0; ?>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 col-lg-height col-md-height col-sm-height col-top <?php post_class( 'clearfix' ); ?>">
<span class="wpa-service-bim-image"></span>
<h1><?php the_title(); ?></h1>
<?php if ( has_post_thumbnail($post->ID) ): ?>
<p><?php echo get_the_post_thumbnail( $post->ID, 'large', array('class' => "img-responsive")); ?></p>
<?php endif; ?>
<?php the_content(); ?>
<p><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">Lees verder >></a></p>
</div><!-- end: col -->
<?php endwhile; ?>
<?php endif; ?>
</div>
</div>
</div>
Решение
добавить переменную $ count вне вашего цикла while с начальным значением ноль
затем внутри цикла while после каждого цикла увеличивайте счетчик $ на 1
добавить, если условие $ count% 3 == 0
если true, создайте новую строку
еще сделать новый кол
$count=0
while($query->have_posts()): $query->the_post(); $more = 0;
$count+=1;
if($count%3==0){
//make new row
}
else{
//make new col
}
Другие решения
Вы также можете использовать перезагрузку реагирующего на загрузку столбца вместо создания новых строк для каждых 3 столбцов. Затем вы столкнетесь с проблемами в 2 столбцах для xs (col-xs-6).
Проверьте загрузочную документацию: http://getbootstrap.com/css/#grid-responsive-resets
В вашем случае вы можете добавить сброс для sm после каждых 2 столбцов и сброс после каждых 3 столбцов для md и lg.
Смотрите пример ниже:
<?php $query = new WP_Query(
array(
'post_type' => 'wpa_diensten',
'posts_per_page' => -1
)
); ?>
<?php $i = 1; // set a counter before the loop ?>
<?php if($query->have_posts()): global $more; ?>
<div class="row">
<?php while($query->have_posts()): $query->the_post(); $more = 0; ?>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 col-lg-height col-md-height col-sm-height col-top <?php post_class( 'clearfix' ); ?>">
<span class="wpa-service-bim-image"></span>
<h1><?php the_title(); ?></h1>
<?php if ( has_post_thumbnail($post->ID) ): ?>
<p><?php echo get_the_post_thumbnail( $post->ID, 'large', array('class' => "img-responsive")); ?></p>
<?php endif; ?>
<?php the_content(); ?>
<p><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">Lees verder >></a></p>
</div><!-- end: col -->
<?php if ( $i%2 == 0 ){ echo '<div class="clearfix visible-sm-block">'; } // show clearfix after each 2 cols for xs ?>
<?php if ( $i%3 == 0 ){ echo '<div class="clearfix visible-lg-block visible-md-block">'; } // show clearfix after each 3 cols for lg and md ?>
<?php endwhile; ?>
</div><!-- end: row -->
<?php endif; ?>
Я думаю, что так должен выглядеть ваш код. Возможно, вам придется подправить цифры … Я думаю, математика правильная! Все, что это делает, это выводит открывающий и закрывающий div в соответствующих местах, если цикл, в котором мы находимся, кратен 3.
<?php $i = 1; # start a loop counter at 1 ?>
<?php if($query->have_posts()): global $more; ?>
<?php while($query->have_posts()): $query->the_post(); $more = 0; ?>
<?php if ($i % 3) == 0 : ?><div class="row"><?php endif; # If the number of the loop we are on divided by 0 is 3, we are in a "third" loop and you want a row opening div?>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 col-lg-height col-md-height col-sm-height col-top <?php post_class( 'clearfix' ); ?>">
<span class="wpa-service-bim-image"></span>
<h1><?php the_title(); ?></h1>
<?php if ( has_post_thumbnail($post->ID) ): ?>
<p><?php echo get_the_post_thumbnail( $post->ID, 'large', array('class' => "img-responsive")); ?></p>
<?php endif; ?>
<?php the_content(); ?>
<p><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">Lees verder >></a></p>
</div><!-- end: col -->
<?php if ($i % 3) == 0 : ?><div class="row"><?php endif; # If the number of the loop we are on divided by 0 is 3, we are in a "third" loop and you want a row closing div ?>
<?php $i++;
<?php endwhile; ?>