两列布局在bootstrap中不工作

Question

我需要参加一个技术面试。我不知道为什么这个代码不起作用。我试图在bootstrap 4创建一个两列布局。似乎我有所有的div在地方和两列布局没有显示。我加载bootstrap 4与一个CDN在wordpress和创建一个自定义主页。它说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.phpblog-posts在左列布局中，您应该将两个列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>