부트 스트랩의 격자 : 높이가 다른 요소

DOM에 요소를 동적으로 추가하는 응용 프로그램에서 작업 해 왔습니다. 추가 된 요소에는 높이가 50px이고 높이가 100px 인 요소와 두 가지 유형이 있습니다. 이들은 부트 스트랩 그리드 시스템의 도움으로 표시됩니다.부트 스트랩의 격자 : 높이가 다른 요소

근무 예 :

<div> 
    <div class="col-xs-6" style="height: 100px;">1</div> 
    <div class="col-xs-6" style="height: 50px;">2</div> 
    <div class="col-xs-6" style="height: 50px;">3</div> 
</div>

하지만 난이 재 배열 할 때, 예기치 않은 공간은 특정 레이아웃에 발생합니다

<div> 
    <div class="col-xs-6" style="height: 50px;">2</div> 
    <div class="col-xs-6" style="height: 100px;">1</div> 
    <div class="col-xs-6" style="height: 50px;">3</div> 
</div>

요소 사이

'1'과 '3'폭 50 픽셀이 갭. 요소 '3'이 그 간격에 배치되는 배열이 있습니까? 이 간격이 왜 발생합니까?

출처

2014-04-14 betelgewse

내가 부트 스트랩이 올바르게 행의 모든 열 (12)을 추가해야 이해하면 (안 그 그것은 당신의 문제를 해결할 것이지만 그것은 최선의 방법이라고 생각합니다.) – knittl

@knittl 맞습니다; 두 번째로'행'에 있다면 여분의 패딩과 마진 (오버플로)이 생기고,'container' div는이를 취소합니다. – MackieeE

한 행에서 12를 초과하는 열에는 아무런 문제가 없습니다. 이것이 모바일 장치에서 부트 스트랩 그리드를 매우 유연하게 만드는 이유입니다. http://getbootstrap.com/css/#grid-example-mixed – ZimSystem

@Gaurav가 올바른지 예를 보면이 일어나고 알고. height:100px col이 2 번째 위치에 놓이면 Bootstrap 열이 왼쪽으로 뜨기 때문에 # 3이 새로운 행으로 강제 이동하지만 오른쪽으로는 뜨지 않습니다.

해결 방법은 키 (100 픽셀) 컬럼에 pull-right 클래스를 사용하는 것입니다 ...

http://bootply.com/129818

출처

2014-04-14 11:40:55 ZimSystem

높이에 인라인 스타일을 추가했기 때문에 이러한 현상이 발생합니다. 특정 height 설정을 가지고 있기 때문에

style="height: 100px; 
style="height: 50px; 
style="height: 50px;

는 .. 더 나은 여기 jsfiddle 1 jsfiddle 2

출처

2014-04-14 11:10:12 4dgaurav

부트 스트랩의 격자 : 높이가 다른 요소

답변

관련 문제