사이드 바를 아래로 내림

Question

내 main 클래스로 인라인을 유지하는 대신 내 사이드 ​​바가 밀려 내려오고 있습니다. 내 피들에서 더 많은 문제를 볼 수 있습니다. (이것은 매우 오랫동안 프로젝트에 bootstrap을 사용하지 않은 첫 번째 시간 중 하나입니다).

내 fiddle을 봅니다.

Answer 1

표시 방법을 선택해야합니다. (block, flex, table)는

난 .container 클래스에 display:flex 추가하여 작동했다. https://jsfiddle.net/31rjm8qb/7/

Answer 2

jsfiddle 당신은 여기에 몇 가지 문제가있다.

• .main 100 % 그렇게 .sidebar이 .main가되지 않은 상태에서 부유
• .sidebar에 맞지 않을 수 있습니다 폭을 가지고, 그래서 그들은 내가 그것을 밖으로 시도하는 좋은 아이디어라고 생각

을 줄 수 없습니다 display: flexbox 및 부유물을 모두 제거하십시오. flex를 사용

Answer 3

대신 floathttps://css-tricks.com/snippets/css/a-guide-to-flexbox/는 반응 디자인을위한 더 나은 방법입니다 : 다음 문서를 확인 . sidebar 및 main을 인 div 안에 넣고 flex 및 flex-wrap을 wrap으로 설정하세요. 여기의 .main 클래스 DIV 100 %이를 해결하기위한 솔루션입니다 :

다음은 폭을 준

.flexbox { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 

 
.latest-single { 
 
    width: 70%; 
 
    background-color: blue; 
 
} 
 

 
.sidebar { 
 
    width: 30%; 
 
    background-color: green; 
 
}

<div class="flexbox"> 
 
    <div class="latest-single"> 
 
    This is our primary content 
 
    </div> 
 

 
    <div class="sidebar"> 
 
    This is our sidebar content 
 
    </div> 
 
</div>