응답 설계에서 divs를 나란히 유지

부트 스트랩의 그리드 시스템을 처음 사용하는 사용자는 장치에 관계없이 float:left을 사용하여 두 개의 div를 나란히 유지해야합니다. 이것은 jQuery 애니메이션이 어느 한 div를보기 위해 오른쪽과 왼쪽 부모 div을 움직이기 위해서입니다. 이 효과를 얻기 위해 녹색 상자의 HTML을 구조화하는 방법은 무엇입니까? 또는 그것은 순수하게 css 미디어 쿼리 문제입니까?응답 설계에서 divs를 나란히 유지

enter image description here

무시 파란색 상자.

이

내가 지금까지 무엇을 가지고 :

<div class="container"> 
    <div class="col-xs-12 col-md-7 view"> 
     <div id="panelviewer"> 
      <div class="row"> 
       <div class="col-xs-12 col-md-6 panel1">one</div> 
       <div class="col-xs-12 col-md-6 panel2">two</div> 
      </div> 
     </div> 
    </div> 
</div>

Jsfiddle

출처

2014-04-21 greener

측면에 의해 div의면을 유지하고 당신이 필요로하는 무엇을 달성 할 수있는 다른 방법이 있습니다

#panelviewer .row {white-space:nowrap;} 
.panel1  {display:inline-block;float:none;background:#aaa;} 
.panel2  {display:inline-block;float:none;background:#eee;}

데모http://jsfiddle.net/7HcQ8/3/

출처

2014-04-21 23:15:40 Arbel

덕분에, 그것은했다. 나는 또한 패널 정렬 클래스에'vertical-align : top'을 추가했다. – greener

@ greener 여러분, 천만에요! 당신에게 도움이되기를 기쁘게 생각합니다. – Arbel

당신이 찔러보고 싶다면 실제로 후속 조치를 취해야합니다. http://stackoverflow.com/questions/23225022/responsive-design-toggle-using-bootstrap – greener

상관없이 당신이 암시 적으로 미디어 쿼리에 지정하지 않는 한 당신의 세포가 두 가지로 강제 이동에 비해 너무 넓은 것 윤곽. 이 경우 모바일 브레이크 포인트에 도달하면 콘텐츠 크기가 줄어들어 적합합니다. 같은 클래스 = "sizeSmaller"로 그 된 DIV의 고유 클래스를 놓고이 도울 수 있습니다

@media (max-width: 768px) { 
    .sizeSmaller { 
    height:50%; 
    width:50%; 
    } 

}

은 NeDS에 맞게 미디어 쿼리의 폭을 조정합니다.

출처

2014-04-21 23:10:16 DivineChef

응답 설계에서 divs를 나란히 유지

답변

관련 문제