확대/축소시 부트 스트랩 그리드 정렬 문제

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- *를 추가해야합니다.을 참조하십시오.부트 스트랩 폭 기본적으로 폭과 패딩과 마진을 적용하기 때문에 필요가 적용되지 않습니다, 나는 용기를 추가하고 불필요한 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>