부트 스트랩 4 그리드 문제

-1

부트 스트랩 4의 그리드를 존중하는 데 문제가 있습니다. col-sm-9의 내용과 col-sm-3 float-right의 오른쪽 사이드 바가 있습니다. 그러나 사이드 바는 위로부터 시작하지 않고, 단지 col-sm-9의 끝에서 시작됩니다. 두 열을 정렬하고 싶습니다.부트 스트랩 4 그리드 문제

<section class="row clearfix" ng-cloak> 
<div class="content-top no-gutters"> 
<div style="background-image: url({{post.better_featured_image.source_url}});" class="content-tracks-image"> 
</div> 
    <div class="content-featured-image"> 
      <img> 
    </div> 
</div> 

<div class="clearfix"></div> 

<div class="gs-track col-sm-9"><!--start player-->  
<!---player---> 
</div><!-- close player --> 
<div class="col-sm-9 bg-white pt-3 pb-3" ng-cloak><!-- start content--> 
<!--content-> 
</div><!-- close content --> 
<div class="col-sm-3 float-right pt-3"><!-- start sidebar --> 
<!-- sidebar --> 
</div><!-- close sidebar --> 

</section>

나는 사이드를 정렬 할 수 있었다 : 이것은 기본적으로 내 HTML입니다 Code

: 여기 당신은 페이지의 코드를 검사 할 수 있습니다 : 여기

은보고있는 페이지가 어떻게 콘텐츠로 이동하지만 플레이어 앞에 사이드 바 상자를 이동해야하며이 동작을 원하지 않습니다.

출처

2017-10-19 GoingSolo

우리가 당신을 더 잘 돕기 위해 귀하의 질문을 업데이트하여 [** 최소한의 완전하고 검증 가능한 예제 **] ** 관련 코드 **를 보여주십시오 (http : // stackoverflow .com/help/mcve) ** 질문 **에서. 외부 사이트는 필터 시스템에 의해 악성이거나 플래그가있을 수 있습니다. 사용자가 방문하지 못할 수도 있습니다. 또한 문제를 해결하기 위해 지금까지 시도한 것을 알려 주시면 도움이 될 것입니다. 자세한 내용은 [** 좋은 질문을하는 방법 **] (http://stackoverflow.com/help/how-to-ask)에 관한 도움말을 참조하십시오 :) –

Why downvoted? 내 질문을 고정했습니다 – GoingSolo

HTML을 실행하려고했을 때 동일한 내용을 얻지 못했기 때문에 제공된 링크로 작업하기가 어려웠습니다. 하지만 수동으로 내 콘텐츠를 넣고 다시 만들려고 할 때 container div에 bootstraps ROW를 사용하는 것이 효과가 있다는 것을 알게되었습니다.

<div class="row"> 
    <div class="col-sm-9">CONTENT</div> 
    <div class="col-sm-3">SIDEBAR</div> 
</div>

시도해보고 작동하는지 알려주십시오.

출처

2017-10-19 21:19:11

당신 말이 맞아요, 다른 행을 추가해야만했습니다. 감사합니다 – GoingSolo

이걸 유효하게 설정했는데 내 질문에 무슨 문제가 있었습니까? 누군가 제게 낙담했습니다. – GoingSolo

@GoingSolo Welcome to Stack Oveflow. 사람들은 여기에서 사회자 역할을하고 자신의 눈에는 완벽하지 않은 것을 무언가를 downvote 할 때 흥분합니다. 문제를 재현하기가 쉽지 않았기 때문일 수 있습니다. 개인적으로 누군가의 관심 부족으로 생각하지 않는 질문을 해결하기 위해 노력을 추가로 downvote을 정당화. –

부트 스트랩 4 그리드 문제

답변

관련 문제