마지막 행의 요소가 정렬되지 않았습니다.

Question

내 CSS 프레임 워크로 부츠랩 3을 사용하여 웹 사이트의 스타일을 지정합니다.

<div class="row"> 

    <div class="col-lg-4">...</div> 
    <div class="col-lg-4">...</div> 
    <div class="col-lg-4">...</div> 
    <div class="col-lg-4">...</div> 
      . 
      . 
      . 
</div> 

아이디어는 하나의 행에 col-lg-4 사업부를 추가하는 것입니다, 그것이 행의 너비를 초과 가질 때 col-lg-4 사업부가 자동으로 다음 행으로 이동합니다.

일반적으로 정상적으로 작동합니다. 그러나 첫 번째 행의 마지막 col-lg-4 div가 올바르게 정렬되지 않습니다. 데모 주소는 다음과 같습니다. http://imaboy.cn/blog/forums/

이유가 궁금하십니까? 아주 쉬운

http://www.imaboy.cn/screenshot.jpg

Answer 1

: 여기

는 스크린 샷입니다. 첫 번째 열, 마지막 행에는 col-lg-4 요소가 있는데, 여기에는 추가 텍스트 행이 있으므로 그 행이 더 높아집니다. 이로 인해 정상 열의 열이 중단됩니다. 아래 이미지를 참조하십시오 :

당신이 볼 수 있으므로, 베이지 색 영역이 왼쪽에있는 열이 충돌하는 것입니다있다. 문제를 더 잘보기 위해 아래 이미지 참조 : 당신은 충돌과 어떻게 로켓 열을 모두 차단 수레를 볼 수 있도록

은 내가 투명성을 추가했습니다.

솔루션

은 당신의 CSS에 이것을 추가 :

.col-md-6.col-xs-6.col-sm-6.col-lg-4{min-height:70px; margin-top:20px; } 

지금 당신이 그 열이 쉽게 떠 (필요한 경우 그 높이를 조정) 할 수있는 적절한 높이를해야합니다 있는지 확인하십시오. 또한 스타일 시트에 모든 것을 넣는 것이 낫기 때문에 여백 위쪽 선언을 인라인 대신 CSS에 추가했습니다. 또한, 당신은 당신이 어디 사이트에 열 영향을 미치는 위험하지 않도록 myCol처럼, 그 컬럼에 이름을 부여 고려해야 당신은 내 영어 죄송 그들을 쉽게

로

.myCol{min-height:70px; margin-top:20px; }