css - 缩放时引导网格对齐问题

Question

我的 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;
}

Answer 1

bootstrap HTML 结构不正确，需要在容器div 中添加行，在行中添加col-md-* 引用https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp,In默认情况下应用 Bootstrap 宽度，因此无需应用宽度、填充和边距，我已经通过添加容器和删除不必要的 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>