Question

我的引导网格对齐有点问题。

我有三个主要栏目。一个用于左侧栏，一个用于博客帖子，一个用于右侧栏。

我正试图在左侧和右侧边栏的顶部放一个黄色条。我已经在左侧边栏上成功添加了一个，但在我的右侧边栏上，我无法让它有一个固定的位置。每当我缩小或放大时它都会移开，这与左侧边栏不同。

这是我的侧边栏的 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

没有正确的引导程序HTML结构，您需要在容器div中添加行，并在行中添加col-md- *请参阅https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp,In默认情况下引导程序宽度应用，因此无需应用宽度和填充和边距，我通过添加容器并删除不必要的CSS来更改HTML结构...立即检查

＆＃13;

/* 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;
}

＆＃13;

<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>

＆＃13;

缩放

1 个答案: