CSS Bootstrap 3 网格布局中的 Wordpress Loop 帖子
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20955818/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Wordpress Loop posts in Bootstrap 3 grid layout
提问by lowercase
I am using Bootstrap 3 within Wordpess and have an issue getting my archive posts to display across the page in a grid format. My wordpress loop code is...
我在 Wordpess 中使用 Bootstrap 3 并且在让我的存档帖子以网格格式在整个页面上显示时遇到问题。我的 wordpress 循环代码是...
<?php if ( have_posts() ) : ?>
<?php
$args=array(
'post_type' => 'artist',
'post_status' => 'publish',
'posts_per_page' => -1,
'caller_get_posts'=> 1
);
$my_query = null;
$my_query = new WP_Query($args);
if( $my_query->have_posts() ) {
echo '';
while ($my_query->have_posts()) : $my_query->the_post(); ?>
<li>
<img src="<?php the_field('artist_photo'); ?>" alt="" class="img-responsive" />
</li>
<?php endwhile;
}
wp_reset_query();
?>
<?php while ( have_posts() ) : the_post(); ?>
<?php endwhile; ?>
<?php else : ?>
<?php endif; ?>
This displays a list containing the post's image. Right now, they list one after the other down the page.
这将显示一个包含帖子图像的列表。现在，他们在页面上一个接一个地列出。
How would I get them to use my bootstrap grid showing 4 across the page, then the next 4 in the row beneath, then the next 4 in row beneath that like this...
我如何让他们使用我的引导程序网格，在页面上显示 4 个，然后是下面一行中的下一个 4 个，然后是下面一行中的下一个 4 个......
<div class="row">
<div class="col-md-3">
<li>image 1 goes here</li>
</div>
<div class="col-md-3">
<li>image 2 goes here</li>
</div>
<div class="col-md-3">
<li>image 3 goes here</li>
</div>
<div class="col-md-3">
<li>image 4 goes here</li>
</div>
</div>
etc. Is that possible? Basically i want the Wordpress loop to list ALL of my posts 4 across the page instead of one after the other in a html list down the page.
等等，这可能吗？基本上，我希望 Wordpress 循环在整个页面上列出我的所有帖子 4，而不是在页面下方的 html 列表中一个接一个地列出。
采纳答案by Germain
Yes you can do it.
是的，你可以做到。
<?php
$args=array(
'post_type' => 'artist',
'post_status' => 'publish',
'posts_per_page' => -1,
'caller_get_posts'=> 1
);
$my_query = null;
$my_query = new WP_Query($args);
if( $my_query->have_posts() ) {
echo '';
$i = 0;
while ($my_query->have_posts()) : $my_query->the_post();
if($i % 4 == 0) { ?>
<div class="row">
<?php
}
?>
<p><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></p>
<p><a href="<?php the_field('artist_link'); ?>"><?php the_field('artist_name'); ?></a></p>
<p><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><img src="<?php the_field('artist_photo'); ?>" alt="" class="img-responsive" /></a></p>
<?php
if($i % 4 == 0) { ?>
</div>
<?php
}
$i++;
endwhile;
}
wp_reset_query();
?>
回答by Ken Prince
// Opening container or wrap outside of the loop
<div class="container my-container">
// start the loop
<?php
$args=array(
'post_type' => 'post',
'post_status' => 'publish',
'posts_per_page' => 18
);
$my_query = null;
$my_query = new WP_Query($args);
if( $my_query->have_posts() ) {
$i = 0;
while ($my_query->have_posts()) : $my_query->the_post();
// modified to work with 3 columns
// output an open <div>
if($i % 3 == 0) { ?>
<div class="row">
<?php
}
?>
<div class="col-md-4">
<div class="my-inner">
// all your content, title, meta fields etc go here.
</div>
</div>
// increment the loop BEFORE we test the variable
<?php $i++;
if($i != 0 && $i % 3 == 0) { ?>
</div><!--/.row-->
<div class="clearfix"></div>
<?php
} ?>
<?php
endwhile;
}
wp_reset_query();
?>
</div><!--/.container-->
回答by Zarko Jovic
I just think all of you have complicated the thing very much.The main problem of all of your solutions is that if you do not have the equal number of elements in the row you do not close the final row, and you get a real mess...
我只是觉得你们所有人都把事情复杂化了。你们所有解决方案的主要问题是，如果你在行中没有相同数量的元素，你不会关闭最后一行，你会得到真正的混乱...
Let me explain my solution with only one IF (similar to yours, but without complicated stuff, and adjustable)
让我只用一个 IF 来解释我的解决方案（类似于你的，但没有复杂的东西，并且可以调整）
Open row
Run loop
If it is the last element in row close row, and open another one
Close the final row
And here is the example in the loop (I do not get into which WP_Query you display and how did you get your posts)
这是循环中的示例（我不了解您显示的 WP_Query 以及您是如何获得帖子的）
$columns_num = 4; // The number of columns we want to display our posts
$i = 0; //Counter for .row divs
echo '<div class="row">';
/* Start the Loop */
while ( have_posts() ) : the_post();
echo '<div class="single-product-archive col-md-' . 12 / $columns_num . '">'
get_template_part( 'template-parts/content', get_post_format() );
echo '</div>';
if($i % $columns_num == $columns_num - 1 ) {
echo '</div> <div class="row">';
}
$i++;
endwhile;
echo '</div>';
Note that you can change the value of $columns_num = 4. You can even make a select box from your customizer and to just select how many columns per row you want. Ofcourse, value must divide number 12 (bootstrap columns) without rest. So just 1, 2, 3, 4 and 6 are acceptible.
请注意，您可以更改 的值$columns_num = 4。您甚至可以从定制器中创建一个选择框，然后只选择您想要的每行多少列。当然，值必须无休止地除以数字 12（引导列）。所以只有 1、2、3、4 和 6 是可以接受的。
回答by Jared
I dont think any of these options fully work. They are assuming that the number of elements/posts is exactly divisible by the column number. For example:
我不认为这些选项中的任何一个完全有效。他们假设元素/帖子的数量可以被列数整除。例如：
10 posts diveded by 2 = 5 nice closed rows
10 个帖子被 2 = 5 个漂亮的封闭行所淹没
but
但
10 posts divided by 3 = 3 nice rows and one row not closed by a final div.
10 个帖子除以 3 = 3 个不错的行和一个没有被最终 div 关闭的行。
My solution was to check the counter after the loop, if it was divisible ignore, else add the closing div.
我的解决方案是在循环后检查计数器，如果它是可分的忽略，否则添加结束 div。
<?php $i = 0; //keep track of the row div ?>
<?php foreach ($array_object as $key => $value ) : ?>
<?php if($i % 2 == 0) : ?>
<div class="row">
<?php endif; ?>
<div class="col-md-6">
Some content in the div
</div>
<?php $i++; ?>
<?php if($i != 0 && $i % 2 == 0) : ?>
</div><!--/.row-->
<?php endif; ?>
<?php endforeach; ?>
<?php if($i != 0 && $i % 2 != 0) : // close the row if it did not get closed in the loop ?>
</div><!--/.row-->
<?php endif; ?>
回答by lowercase
THANKS TO GERMAIN THIS COMPLETE CODE ANSWERS MY QUESTION....
感谢 GERMAIN 这个完整的代码回答了我的问题......
<?php
$args=array(
'post_type' => 'artist',
'post_status' => 'publish',
'posts_per_page' => -1,
'caller_get_posts'=> 1
);
$my_query = null;
$my_query = new WP_Query($args);
if( $my_query->have_posts() ) {
echo '';
$i = 0;
while ($my_query->have_posts()) : $my_query->the_post();
if($i % 4 == 0) { ?>
<div class="row">
<?php
}
?>
<div class="col-md-4">
<div class="artist-thumbnail">
<p><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></p>
<p><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><img src="<?php the_field('artist_photo'); ?>" alt="" class="img-responsive" /></a></p>
</div>
</div>
<?php
if($i % 4 == 0) { ?>
<?php
}
$i++;
endwhile;
}
wp_reset_query();
?>
</div>
回答by JosephRae
These solutions work well, but they aren't responsive, as in, without adding media calls to override bootstrap's columns, they will always output the same number of posts per row, regardles of the screen size.
这些解决方案运行良好，但它们没有响应，因为如果不添加媒体调用来覆盖引导程序的列，它们将始终输出相同数量的每行帖子，无论屏幕大小如何。
I wanted a 3 column grid display that utilizes bootstrap column widths, floats and clearfixes, which meant that in order to avoid the non-uniform staggering that happens when floated post heights are different, all posts must be the same height.
我想要一个 3 列网格显示，它利用引导列宽度、浮动和清除修复，这意味着为了避免浮动帖子高度不同时发生的非均匀交错，所有帖子必须具有相同的高度。
I was originally trying to do this with bootstrap's .row-eq-height, but it uses flexbox, which displays all columns on the same row, regardless of the column sizes.
我最初试图用 bootstrap 的 .row-eq-height 来做到这一点，但它使用了 flexbox，它在同一行上显示所有列，而不管列的大小。
This person's jQuery solution solved my issue... Same height column bootstrap 3 row responsive
这个人的 jQuery 解决方案解决了我的问题...... 相同高度的列引导程序 3 行响应
// Add this javascript to header.php(or equivalent file)...
jQuery( document ).ready(function() {
var heights = jQuery(".col-eq-height").map(function() {
return jQuery(this).height();
}).get(),
maxHeight = Math.max.apply(null, heights);
jQuery(".col-eq-height").height(maxHeight);
});
... and then add the .col-eq-height class to your defined bootstrap column...
...然后将 .col-eq-height 类添加到您定义的引导列...
<?php
$args = array();
$query = new WP_Query($args);
while($query->have_posts()) : $query->the_post(); ?>
<div class="col-eq-height col-md-4">
<?php // Content goes here... ?>
</div><!-- /.col-md-4 -->
<?php endwhile;
wp_reset_postdata();
?>
Which results in a responsive, 3 column, stackable bootstrap grid of you posts. Hope that was on topic and helps someone out.
这会产生一个响应式、3 列、可堆叠的自举网格你的帖子。希望这是主题并帮助某人。
