отображение изображений горизонтально не работает

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>