带有响应图像的 5 列不跨越主列行

Question

我有五个 col-md-2，每列中都有一个响应式图像。这五列嵌套在 col-md-12 中，但是每个 col-md-2 不是默认的 230px 宽度，这使得所有 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