5 столбцов с отзывчивыми изображениями не охватывают строку главного столбца

Question

У меня есть пять col-md-2 и внутри каждого столбца есть отзывчивое изображение. Эти пять столбцов вложены в col-md-12, однако каждый col-md-2 не является шириной по умолчанию 230 пикселей, что делает все столбцы col-md-2 не охватывающими весь col-md-12. Я знаю, что у меня должно быть 6 col-md-2, чтобы соответствовать col-md-12, но почему мой col-md-2 не по ширине ширины 230px по умолчанию, это из-за класса img-responsive?

<div class="container"> 
    <div class="row"> 
     <div class="col-md-12"> 
     <div class="col-md-2"><img src="img1.jpg" class="img-responsive"></div> 
     <div class="col-md-2"><img src="img1.jpg" class="img-responsive"></div> 
     <div class="col-md-2"><img src="img1.jpg" class="img-responsive"></div> 
     <div class="col-md-2"><img src="img1.jpg" class="img-responsive"></div> 
     <div class="col-md-2"><img src="img1.jpg" class="img-responsive"></div> 
     </div> 
    </div> 
</div> 

спасибо.

Answer 1

Вы можете использовать этот код

.col-xs-5ths, 
 
.col-sm-5ths, 
 
.col-md-5ths, 
 
.col-lg-5ths { 
 
    position: relative; 
 
    min-height: 1px; 
 
    padding-right: 10px; 
 
    padding-left: 10px; 
 
} 
 

 
.col-xs-5ths { 
 
    width: 20%; 
 
    float: left; 
 
} 
 
img{ 
 
    max-width:100%; 
 
} 
 
@media (min-width: 768px) { 
 
.col-sm-5ths { 
 
     width: 20%; 
 
     float: left; 
 
    } 
 
} 
 
@media (min-width: 992px) { 
 
    .col-md-5ths { 
 
     width: 20%; 
 
     float: left; 
 
    } 
 
} 
 
@media (min-width: 1200px) { 
 
    .col-lg-5ths { 
 
     width: 20%; 
 
     float: left; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="row"> 
 
    <div class="col-md-5ths"> 
 
     <img src="http://lorempixel.com/400/200" class="img-responsive"> 
 
    </div> 
 
    <div class="col-md-5ths"> 
 
     <img src="http://lorempixel.com/400/200" class="img-responsive"> 
 
    </div> 
 
    <div class="col-md-5ths"> 
 
     <img src="http://lorempixel.com/400/200" class="img-responsive"> 
 
    </div> 
 
    <div class="col-md-5ths"> 
 
     <img src="http://lorempixel.com/400/200" class="img-responsive"> 
 
    </div> 
 
    <div class="col-md-5ths"> 
 
     <img src="http://lorempixel.com/400/200" class="img-responsive"> 
 
    </div> 
 
</div>

Примечание: Изменить CSS медиа-запросов в соответствии с вашими потребностями