缩放时的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

没有正确的引导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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></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> 
   <?php
   endif; 
   ?>
</div>

  </div> <!-- /.blog-main -->   
<div class="col-md-2 col-xs-2">
<?php get_sidebar('2'); ?>
</div>
</div> <!-- /.row -->
</div>
</div>