Bootstrap img responseive，它是如何工作的？

Question

嘿我正在使用bootstrap，我正在使用相同尺寸的图像，但我得到两个非常不同的输出我不知道它的原因是什么，可以帮助解决这个问题吗？ 我附上截图：

以下是代码：

    <div class="pdt" id="pdt">
      <div class="row product">
       <div class="col-md-3">
        <img src="photos/3KG_P.jpg" class="img-responsive">
        <p class="imgDescription">Capacity :3 KG</p>
        <input type="button" value="Ask Price" class="btn btn-primary" onclick="fun6()">
       </div>
<div class="col-md-offset-1 col-md-3"><img src="photos/5KG_P.jpg" class="img-responsive"><p class="imgDescription">Capacity :5 KG</p><input type="button" value="Ask Price" class="btn btn-primary" onclick="fun7()"></div><div class="col-md-offset-1 col-md-3"><img src="photos/8KG_P.jpg" class="img-responsive"><p class="imgDescription">Capacity :8 KG</p><input type="button" value="Ask Price" class="btn btn-primary" onclick="fun8()"></div>
</div>
<div class="row product">

  <div class="col-md-offset-1 col-md-3">
   <img src="photos/10KG_P.jpg" class="img-responsive"><p class="imgDescription">Capacity :10 KG</p><input type="button" value="Ask Price" class="btn btn-primary" onclick="fun9()"></div>
<div class="col-md-offset-1 col-md-3"><img src="photos/15KG_P.jpg" class="img-responsive"><p class="imgDescription">Capacity :15 KG</p><input type="button" value="Ask Price" class="btn btn-primary" onclick="fun10()"></div><div class="col-md-offset-1 col-md-3"><img src="photos/20KG_P.jpg" class="img-responsive"><p class="imgDescription">Capacity :20 KG</p><input type="button" value="Ask Price" class="btn btn-primary" onclick="fun11()"></div></div></div>

Answer 1

我认为问题是因为那些使用班级col-md-offset-1

试试这个：

<div class="pdt" id="pdt">
    <div class="row product">
        <div class="col-md-4">
            <img src="photos/3KG_P.jpg" class="img-responsive">
            <p class="imgDescription">Capacity :3 KG</p>
            <input type="button" value="Ask Price" class="btn btn-primary" onclick="fun6()">
        </div>

        <div class="col-md-4">
            <img src="photos/5KG_P.jpg" class="img-responsive">
            <p class="imgDescription">Capacity :5 KG</p>
            <input type="button" value="Ask Price" class="btn btn-primary" onclick="fun7()">
        </div>

        <div class="col-md-4">
            <img src="photos/8KG_P.jpg" class="img-responsive">
            <p class="imgDescription">Capacity :8 KG</p>
            <input type="button" value="Ask Price" class="btn btn-primary" onclick="fun8()">
        </div>

    </div>

    <div class="row product">

        <div class="col-md-4">
            <img src="photos/10KG_P.jpg" class="img-responsive">
            <p class="imgDescription">Capacity :10 KG</p>
            <input type="button" value="Ask Price" class="btn btn-primary" onclick="fun9()">
        </div>

        <div class="col-md-4">
            <img src="photos/15KG_P.jpg" class="img-responsive">
            <p class="imgDescription">Capacity :15 KG</p>
            <input type="button" value="Ask Price" class="btn btn-primary" onclick="fun10()">
        </div>

        <div class="col-md-4">
            <img src="photos/20KG_P.jpg" class="img-responsive">
            <p class="imgDescription">Capacity :20 KG</p>
            <input type="button" value="Ask Price" class="btn btn-primary" onclick="fun11()">
        </div>
    </div>
</div>