ズーム時のブートストラップグリッドアラインメントの問題

Question

私はブートストラップグリッドアライメントに少し問題があります。

私は3つの主要な列を持っています。 1つは左側のサイドバー用、もう1つはブログ記事用、もう1つは右側のサイドバー用です。

私は左右のサイドバーの上に黄色いバーを置こうとしています。私は正常に私の左側のサイドバーに1つを追加しましたが、私の右側のサイドバーで、私はそれが固定された位置にすることはできません。左側のサイドバーとは異なり、ズームアウトまたはズームインするたびに移動します。ここで

は私のサイドバーと私のの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- *の行を追加する必要があります。を参照してください。ブートストラップ幅デフォルトでは、幅とパディングとマージン適用するので、不要を適用していない、私はコンテナを追加し、不要な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>