divst를 부트 스트랩 컨테이너에 세로로 표시하는 방법에 대한 아이디어가 있으십니까?

Question

나는이 그냥이 개 된 div하지만 데이터는 MySQL의

에서 가져온 경우가 foreach 루프를 통해 10 또는 15이 될 수 이제 이러한 제품

<div class="container"> 
<div class="product"> 
          <div class="image"><img class="img-responsive" src="http://www.shingpoint.com.pk/Images/Thumbnails/pc-a1-470-59100-080316082835.jpg"/></div> 
          <div class="description"> 
           <h4 class="productname">ASUS VivoMini PC - UN65H-M030M</h4> 
          </div> 
          <div class="price"> 
           <span>Rs. 37,900</span> 
           <input type="button" class="btn btn-primary btn-sm" value="Details"/> 
          </div> 
         </div> 
         <div class="product"> 
          <div class="image"><img class="img-responsive" src="http://www.shingpoint.com.pk/Images/Thumbnails/pc-a1-470-59100-080316082835.jpg"/></div> 
          <div class="description"> 
           <h4 class="productname">ASUS VivoMini PC - UN65H-M030M</h4> 
          </div> 
          <div class="price"> 
           <span>Rs. 37,900</span> 
           <input type="button" class="btn btn-primary btn-sm" value="Details"/> 
          </div> 
         </div> 
</div> 

이 된 div와 CSS

.image{ 
    display: block; 
    overflow: hidden; 
    position: relative; 
    text-align: center; 
    width: 100%; 
    max-height: 180px; 
    height: 60%; 
    margin-left: auto; 
    margin-right: auto; 
    padding-left:.40cm; 
} 
.description{ 
    margin: 0 auto; 
    max-width: 95%; 
} 
.productname{ 
    overflow: hidden; 
    display: block; 
    margin: 25px 0 0; 
    padding: 0; 
    line-height: 24px; 
} 
.price{ 
    margin-top: 10px; 
    margin-bottom: 8px; 
    font-size: 18px; 
    font-weight: 500; 
    color: #E40613; 
} 

.product{ 
    height: 320px; 
    border: 1px solid #DDDDDD; 
    border-bottom: 1px solid #DDDDDD; 
    text-align: center; 
    padding: 10px 0; 
} 

이

이제는이 div가 가로로 표시됩니다. 슬라이더가있는 컨테이너에 세로로 표시하려고합니다. 가능한 슬라이더가 아닌 경우 세로로 표시 할 수 있습니까?

Answer 1

display: inline-block을 제품 클래스에 추가해야합니다. div가 여러 개인 경우 너비를 정의해야 할 수도 있습니다.