两列布局在引导中不起作用

Question

所以我需要为一份工作做一个技术面试。我不确定为什么这段代码不能工作。我试图在bootstrap 4中创建一个两列的布局。似乎我已经准备好了所有的div，但是两列的布局没有显示出来。我在wordpress中加载了带CDN的bootstrap 4，并创建了一个自定义主页。上面写着sidebarhome.php，这就是我想在右边的栏目布局上看到的，而博客帖子在左边的地方。

<?php
/**
 * The main template file
 *
 * This is the most generic template file in a WordPress theme
 * and one of the two required files for a theme (the other being style.css).
 * It is used to display a page when nothing more specific matches a query.
 * E.g., it puts together the home page when no home.php file exists.
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/
 *
 * @package home
 */

get_header();
?>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-6">
            <main id="primary" class="site-main">
                <h1>.COM</h1>
                <h2>School Life</h2>
                <?php
                if ( have_posts() ) :

                    if ( is_home() && ! is_front_page() ) :
                        ?>
                        <header>
                            <h1 class="page-title screen-reader-text"><?php single_post_title(); ?></h1>
                        </header>
                        <?php
                    endif;

                    /* Start the Loop */
                    while ( have_posts() ) :
                        the_post();

                        /*
                         * Include the Post-Type-specific template for the content.
                         * If you want to override this in a child theme, then include a file
                         * called content-___.php (where ___ is the Post Type name) and that will be used instead.
                         */
                        get_template_part( 'template-parts/content', get_post_type() );

                    endwhile;

                    the_posts_navigation();

                else :

                    get_template_part( 'template-parts/content', 'none' );

                endif;
                ?>

            </main><!-- #main -->
</div>
</div>


<div class="row">
        <div class="col-md-6">
            <?php include 'sidebarhome.php';?>
        </div>
</div>


</div><!--End Container-->

<?php
get_footer();

Answer 1

你能检查一下下面的代码吗？希望它能为你工作。

目前，您已经为不同的列获取了不同的行。

如果您想要在右栏布局上添加sidebarhome.php，在左栏布局上添加博客帖子，那么您应该将这两个栏的col-md-6放在一个row中。

<div class="row">
  <div class="col-md-6">
    All blog posts (the_post();)
  </div>
  <div class="col-md-6">
    Sidebar Home content (sidebarhome.php)
  </div>
</div>