2017-12-23 4 views
0

I는 전화를 제외하고 찾아 작품 장고 - 오스카부트 스트랩 그리드 콘텐츠 위치

<ul class="row"> 
    {% for product in products %} 
    <li class="col-xs-6 col-sm-4 col-md-3 col-lg-3">{% render_product product %}</li> 
    {% endfor %} 
</ul> 

에 대한 다음과 같은 코드가 있습니다.

스크린 샷에서 알 수 있듯이 크기가 전화로 줄어들면 그리드 시스템에 이상한 공간이 있습니다 (전화에서 실제로 이와 같이 표시됨). 바탕 화면에서 브라우저 크기가 특정 픽셀 미만이 될 때까지 그리드 시스템이 올바르게 표시됩니다. 이 문제를 해결할 수있는 방법이 있습니까? 당신이 찾고있는 무엇을

Grid system working well

Phone mode

답변

0

clearfix

row 클래스

+0

답변을 주셔서 감사합니다.하지만 여전히 같은 문제가 있습니다. 특정 너비로 ​​창 크기를 줄인 다음 갑자기 빈 여백을 clearfix 응용 프로그램 후에도 남겨두면 문제가없는 것 같습니다. –

+0

해결책을 찾았습니다! 그것은 각각의 그리드가 다른 높이를 가졌고 최소 높이를 설정해야했기 때문입니다. –

0
이 경우, 부모 요소에 이러한 추가입니다 (나는 bootstrap3를 사용하고 생각)

자세히 보시면 전화 모드에서 재고가 다른 회선에 있으며, 이것이 높이 문제라고 가정합니다. 가장 좋은 해결책은 플렉스 박스을 사용하는 것입니다. 또는 최소 높이를 수동으로 조정하십시오.