2016-09-22 3 views
0

Bootstrap grid requirement for Desktop expanded/collapsed div, tablet mode확장 DIV는</p> <p>우리는 다음과 같은 요구 사항에 대응 된 div를 개발하기 위해 노력하고, 바탕 화면 해상도

안녕 다른 섹션 DIV의 내용을 아래로 밀어하지 않습니다 왼쪽 div를 하나씩 밀어 넣어야합니다.

우리는 요구 사항에 따라 태블릿 모드 표현을 달성 할 수 있지만 오른쪽 div를 확장 할 때 데스크톱 모드에서 왼쪽 div를 부동화하는 방법은 무엇입니까?

미리 감사드립니다.

+0

, 당신이 인 flexbox 레이아웃을 체크 아웃 할 수 있습니다합니다. https://css-tricks.com/snippets/css/a-guide-to-flexbox/ – DBS

답변

1

당신은 그 버튼을 클릭하고 박스 2-5에서 클래스를 col-lg-6에서 col-lg-12로, 부모 클래스 박스 1-5를 col-lg- 8 내지 컬럼-LG-4 다음 확장 바로 상자에서 COL-LG-4 COL-LG-8이 여러 가지 방법으로 일을 할 수 즉

$('.button-expand').click(function(){ 
    $('.box-small').toggleClass('col-lg-6'); 
    $('.box-small').toggleClass('col-lg-12'); 
    $('.parent-box').toggleClass('col-lg-8'); 
    $('.parent-box').toggleClass('col-lg-4'); 
    $('.box-right').toggleClass('col-lg-8'); 
    $('.box-right').toggleClass('col-lg-4'); 
});