如何使用Bootstrap在表格中显示WordPress帖子？

You could use the WP_Query argument as an array, it's much less confusing.

Since you want to fetch the posts in a chronological order, order by date. Your instance of the class WP_Query becomes:

$recentPost = new WP_Query(
    array(
        'type'           => 'post',
        'posts_per_page' => 6,
        'order'          => 'ASC',
        'orderby'        => 'date' // Order by date!
    )
);

Then I see you're using Bootstrap with rows and columns.

First step, create everything around the while() loop:

<?php 


    if(have_posts()) {

        // First, build parent DIV element outside the while() loop
        ?>

        <div class="row posts_table">

        <?php

        // Setup the counter
        $counter = 0;

Second, build everything inside the while loop:

        // Iterate over the posts
        while($recentPost->have_posts()) {

            // Get next
            $recentPost->the_post();

            // Render post content here
            // Bootstrap uses 12 columns, we want 3 blocks. 12/3 = 4 thus use cols-xs-4.
            ?>

            <div class="cols-xs-4">
                <?php the_title(); ?>
            </div>

This is the tricky part. After three posts, we're building a new row element. Why? Because Bootstrap was designed to use 12 columns in a row, no more.

If you want to refactor this code later on, let's say you want 9/15 posts per page, you can easily update the posts_per_page value from the array inside WP_Query without manually putting in a break at 3, 6, 9 and so on.

            <?php

            // Increment for next post
            $counter++;

            // Use the modulo to break a Bootstrap row and start a new one
            // The HTML inside this control flow will be printed every third post (every third iteration).
            if($counter % 3 == 0){
                ?>
                </div>
                <div class="row posts_table">
                <?php
            }

        }

Finally, we only have to close our last .row.posts_table element.

        ?>

        </div>
        <!-- end of .row.posts_table -->

        <?php
    }


 ?>

Also, check out the WordPress documentation on WP_Query, especially the WP_Query orderby part.

I don't know if .posts_table has any meaning to the website, if not => it can be removed.

I think you might be looking for something like this. Note that @Joachim has provided a more in depth answer but the below is a modified version of your original code that might be a good reference for you moving forward.

<div class="container post_container">
    <div class="row">
        <div class="col-xs-12">
        <h1>Recent Posts</h1>

            <?php 

            $recentPost = new WP_Query('type=post&posts_per_page=6&order=ASC&');


            if(have_posts()) {
                // the wrapper div goes between the IF outside the while
                // added a '.row' class here ?>
                <div class="posts_table row">
                    <?php
                    while($recentPost->have_posts()) {
                        $recentPost->the_post(); 
                            // the column class is added below here inside the WHILE
                            // it needs to output on each loop ?>
                            <div class="col-xs-4">

                                <!-- post content comes here -->

                            </div>

                        <?php

                    } // end the WHILE
                // the .posts_table wrapper is closed here outside the WHILE inside the IF ?>
                </div>
            <?php
        } // end the IF




             ?>