썸네일 수직

Question

가 여기 내 샘플 출력의 정렬되지 부트 스트랩

.thumbnails { 
    text-align: center; 
} 
.thumbnails li { 
    width: 150px; 
    height: 250px; 
    background: red; 
    float: none !important; /* to overwrite the default property on the bootstrap stylesheet */ 
    display: inline-block; 
    *display: inline; /* ie7 support */ 
    zoom: 1; 
} 

이미 수평으로 정렬되어있는 것으로 나타났습니다. 제 문제는 수직으로 정렬하는 것입니다. 어떻게해야합니까? 제발 도와주세요!

Answer 1

행 또는 컨테이너로 감싸십시오. 수동/요소의 높이를 설정 유지하는 요소의 높이를 일치, 또는 다음과 같은 CSS :

.thumbnails > li { 
    float: left; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    } 
    .thumbnails > li:nth-child(3n+4) { 
    clear: both; 
    } 

포장이 컨테이너에 내가 찾은 것을이 더 좋게 만드는 방법은 두 가지가 있습니다

<div class="products"> 
    <div class="container"> 
    <ul class="thumbnails">' 
     <li> 
     <div>'.$item->ASIN.'</div> 
     <div><img src="'.$item->SmallImage->URL.'" alt=""></div> 
     <div>'.$item->ItemAttributes->Title.'</div> 
     <div>'.$item->ItemAttributes->ProductGroup.'</div> 
     </li> 
    </ul> 
    </div> 
</div> 

Answer 2

문제를 해결할 수는 없습니다. 그것을 단지 더 작은 공간으로 제한 할 것입니다.

유사 문제 :

vertically aligning thumbnails in bootstrap css?

Aligning thumbnails along columns using twitter-bootstrap

twitter bootstrap thumbnails not aligning properly anywhere but Chrome + Windows XP

Answer 3

이 도움이된다면 나는 그에게 말 좀 있지만 확실하지 알 - http://getbootstrap.com/css/#grid-responsive-resets

<div class="row"> 
    <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> 
    <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> 

    <!-- Add the extra clearfix for only the required viewport --> 
    <div class="clearfix visible-xs"></div> 

    <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> 
    <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> 
</div> 

보다 ks,

애쉬.