缩放时的bootstrap网格对齐问题

我的自举网格对齐存在一些问题。
我有三个主要专栏。一个用于左侧栏, 一个用于博客帖子, 另一个用于右侧栏。
我正在尝试在左侧和右侧边栏的顶部放置一个黄色栏。我已经在左侧栏中成功添加了一个, 但是在右侧栏中, 我无法使其具有固定的位置。每当我缩小或放大时, 它就会消失, 这与左侧边栏不同。
这是带有侧边栏的index.php代码：

< div class="row"> < div class="col-md-5"> < /div> < div class="col-md-1"> < /div> < div class="col-md-4"> < /div> < div id="maineverything"> < div class="col-md-3"> < ?php get_search_form(); ?> < ?php get_sidebar('1'); ?> < /div> < div class="col-md-7 blog-main"> < div class="blogtitle"> < p> PAKU SQUAD < span class="subheader1"> BLOG< /span> < /p> < hr> < /div> < ?php if ( have_posts() ) : while ( have_posts() ) : the_post(); get_template_part( 'content', get_post_format() ); endwhile; ?> < nav> < ul class="pager"> < li> < ?php next_posts_link( 'Older Posts > > > ' ); ?> < /li> < li> < ?php previous_posts_link( '< < < Newer Posts' ); ?> < /li> < /ul> < /nav> < ?php endif; ?> < /div> < !-- /.blog-main --> < div class="col-md-2"> < ?php get_sidebar('2'); ?> < /div> < /div> < /div> < !-- /.row -->

这是我的引导网格的css代码：

/* Column Codes */ .row { padding: 100px; } #maineverything { padding-left: 150px; display: inline-block; max-width: 100%; width: 100%; height: 100%; } .col-md-2 { border-bottom: 2px solid #a7a7a7; max-height: 100%; height: 1920px; width: 250px; background-color: #f0f0f0; } .col-md-3 { border-bottom: 2px solid #a7a7a7; max-height: 100%; height: 1920px; width: 250px; background-color: #f0f0f0; } .col-md-4 { margin-right: 47px; float:right; max-width:100%; width: 250px; height: 50px; background-color: #feb300; } .col-md-5 { padding-top: 50px; max-width:100%; margin-left: 150px; width: 250px; height: 30px; background-color: #feb300; } .col-md-7 { max-height: 100%; height: 1920px; border-bottom: 2px solid #a7a7a7; }

#1【缩放时的bootstrap网格对齐问题】没有正确的引导HTML结构, 你需要在容器div中添加行, 并在行中添加col-md- *。请参考https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp, 默认情况下应用引导宽度, 因此需要应用宽度, 填充和边距, 我通过添加容器和删除不必要的CSS更改了HTML结构… 现在检查

/* Column Codes */.row {padding:0px 100px; }#maineverything {display: inline-block; max-width: 100%; width: 100%; height: 100%; }.col-md-2 {border-bottom: 2px solid #a7a7a7; background-color: #f0f0f0; }.col-md-3.bgyellow{height: 30px; background-color: #feb300; }.bgyellow2{height: 50px; background-color: #feb300; }.col-md-3 {background-color: #f0f0f0; }.col-md-4 {height: 50px; background-color: #feb300; }.col-md-5 {height: 30px; background-color: #feb300; }.col-md-7 {border-bottom: 2px solid #a7a7a7; }

< link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> < script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> < /script> < script src="http://img.readke.com/220529/1F35UR5-1.jpg"> < /script> < div class="container"> < div class="row"> < div class="col-md-3 col-xs-3 bgyellow"> < /div> < div class="col-md-7 col-xs-7"> < /div> < div class="col-md-2 col-xs-2 bgyellow2"> < /div> < /div> < /div> < div id="maineverything"> < div class="container"> < div class="row"> < div class="col-md-3 col-xs-3"> < ?php get_search_form(); ?> < ?php get_sidebar('1'); ?> < /div> < div class="col-md-7 col-xs-7 blog-main"> < div class="blogtitle"> < p> PAKU SQUAD < span class="subheader1"> BLOG< /span> < /p> < hr> < ?php if ( have_posts() ) : while ( have_posts() ) : the_post(); get_template_part( 'content', get_post_format() ); endwhile; ?> < nav> < ul class="pager"> < li> < ?php next_posts_link( 'Older Posts > > > ' ); ?> < /li> < li> < ?php previous_posts_link( '< < < Newer Posts' ); ?> < /li> < /ul> < /nav> < ?phpendif; ?> < /div> < /div> < !-- /.blog-main --> < div class="col-md-2 col-xs-2"> < ?php get_sidebar('2'); ?> < /div> < /div> < !-- /.row --> < /div> < /div>