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

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

1 个答案: