이미지를 가로로 표시하지 않습니다.

Question

이미지를 가로로 표시하려고하는데 저를 위해 작동하지 않습니다. 서로 옆에 8 개의 이미지를 표시하고 싶습니다. 나는 그리드 시스템에 문제가 있음을 알고있다. 지금 그들은 아래에 다른 하나가 표시되고 나는 그들이 수평이되고 싶어요. col-md-1 또는 col-md-2을 사용하면 꺼집니다. 이 문제를 어떻게 해결할 수 있습니까? 미리 감사드립니다!

이것은 내가 가지고있는 것입니다.

<div class="row"> 

    <div class="col-md-1.5"> 
    <div class = "thumbnail"> 
     <img src="pics/LogoIcon01_over.png" alt="160x66" > 
    </div> 
    </div> 
    <div class="col-md-1.5"> 
    <div class = "thumbnail"> 
     <img src="pics/LogoIcon02_over.png" alt="160x66" > 
    </div> 
    </div> 
    <div class="col-md-1.5"> 
    <div class = "thumbnail"> 
     <img src="pics/LogoIcon03_over.png" alt="160x66" > 
    </div> 
    </div> 
    <div class="col-md-1.5"> 
    <div class = "thumbnail"> 
     <img src="pics/LogoIcon04_over.png" alt="160x66" > 
    </div> 
    </div> 
    <div class="col-md-1.5"> 
    <div class = "thumbnail"> 
     <img src="pics/LogoIcon05_over.png" alt="160x66" > 
    </div> 
    </div> 
    <div class="col-md-1.5"> 
    <div class = "thumbnail"> 
     <img src="pics/LogoIcon06_over.png" alt="160x66" > 
    </div> 
    </div> 
    <div class="col-md-1.5"> 
    <div class = "thumbnail"> 
     <img src="pics/LogoIcon07_over.png" alt="160x66" > 
    </div> 
    </div> 
    <div class="col-md-1.5"> 
    <div class = "thumbnail"> 
     <img src="pics/ViewBrandsButton.png" alt="160x66" > 
    </div> 
    </div> 

    </div> 

Answer 1

설명에서 설명한 바와 같이 12.5 % 또는 1/8의 100 %에 해당하는 열 클래스는 없습니다. 이미지는 자동으로 인라인됩니다. 이러한 이미지를 992px (col-md-x)의 최소 너비로 한 줄에 표시하려면이 방법을 사용하는 것이 좋습니다. 이들 주위에서 .thumb 클래스를 사용하는 경우 div가 블록 요소이므로 인라인 블록 또는 인라인으로 변경해야합니다.

데모 : http://jsbin.com/yivavo/1/

CSS :

.my-images {font-size:0;}/*remove white space for inline elements */ 
.my-images img {padding:2px} 

@media (min-width:992px) { 
    .my-images img {width:12.5%;height:auto;} 
} 

HTML 진심으로

<div class="my-images text-center"> 
     <img src="http://placehold.it/166x60/444444/FFFFFF&text=image" alt=""> 
     <img src="http://placehold.it/166x60/444444/FFFFFF&text=image" alt=""> 
     <img src="http://placehold.it/166x60/444444/FFFFFF&text=image" alt=""> 
     <img src="http://placehold.it/166x60/444444/FFFFFF&text=image" alt=""> 
     <img src="http://placehold.it/166x60/444444/FFFFFF&text=image" alt=""> 
     <img src="http://placehold.it/166x60/444444/FFFFFF&text=image" alt=""> 
     <img src="http://placehold.it/166x60/444444/FFFFFF&text=image" alt=""> 
     <img src="http://placehold.it/166x60/444444/FFFFFF&text=image" alt=""> 
    </div>