2015-01-27 2 views
-1

큰 사각형 바로 아래에 유지하려는 가로 배너가 있습니다 (그리드의 왼쪽 상단 모서리, 그림 1 참조) . 즉, 배너가 있기 전에 그리드에서 1 (큰) +6 (일반) 그리드 요소를 갖게됩니다. 케이스 하나에하나의 요소가 고정되어있는 응답 격자 (그리드의 첫 번째 요소를 기준으로)

No zoom

페이지에의 확대, 또는 작은 해상도에 대한 견해는, 나는 그림에서 볼 수 있듯이, 바로 큰 광장 아래에 가로 배너를 유지하고 싶습니다. 2.

Some zoom

그리고, 사용자는 큰 광장을 가로 질러 들어갈 수있는 해상도를 사용하고, 정기적 인 사각형 경우 - 그럼 내가 그림에서 볼 수 있듯이, 오른쪽 배너 후 모든 일반 사각형을 배치 하시겠어요. 3.

어떻게하면됩니까?

나는 부트 스트랩 3 및 각도를 사용합니다.

대단히 감사합니다.

Max zoom

+0

당신은 살펴 보셔야 사용하여 choise에 의해로 더 나은 것 숨겨야 차단

<div class="col-lg-4"> <div class="big_box"></div> </div> <div class="col-lg-8"> <div class="small_box"></div> ... <div class="small_box"></div> </div> 
상자 크기로

, 또는 [ intention.js] (http://intentionjs.com/). 사용자 뷰포트에 따라 DOM을 자동으로 "reoders"합니다. –

답변

0

나는 최근에 당신과 같은 문제가되었다.

큰 상자작은 상자 필요성은 두 요소 (내가 DIV를 사용)로 구분한다.

따라서 div>big_box + div>small_box*6입니다. 이렇게하면 폭을 쉽게 변경할 수 있습니다.

하여이 직업 폭 > = 992px
COL-SM 너비 > = 1200 픽셀
COL-MD- 스탠드 용

COL-LG- 스탠드 -은 너비의 약자 > = 768px
COL-xs-는 크기를 아는 768px <

을 의미합니다, 당신은 부트 스트랩 (12 개) 부분에 블록을 분리하는 것을 이해할 필요가있다.
첫 번째 예제를 사용하면 big_box의 경우 4 또는 5이고 small_box의 경우 8 또는 7 인 것처럼 보입니다.

그래서 같을 것이다 : 당신이 그것을 media queries

관련 문제