使用Bootstrap的图片宽度尺寸不正确

我有4个img元素。跨 2图像

2图像向下4个图像

总计。

这是我的标记：

<html> 
<body> 
    <div class="row" id="row1"> 
     <div class="col-xs-6"> 
      <img src="" id="img1" class="img-responsive" alt="" /> 
     </div> 
     <div class="col-xs-6"> 
      <img src="" id="img2" class="img-responsive" alt="" /> 
     </div> 
    </div> 
    <div class="row" id="Div1"> 
     <div class="col-xs-6"> 
      <img src="" id="img3" class="img-responsive" alt="" /> 
     </div> 
     <div class="col-xs-6"> 
      <img src="" id="img4" class="img-responsive" alt="" /> 
     </div> 
    </div> 
</body> 
</html>

麻烦的是，有中间的空隙。当我使用Chrome查看元素时，Bootstrap没有自动设置边距或填充。

我该怎么做/使用？

这是截图（这是一个移动浏览器）

enter image description here

来源

2014-10-04 Andrew Simpson

你可以收紧水槽... http://stackoverflow.com/questions/26077931/three-inputs-in-a-row-bootstrap-3/26078033#26078033 – timgavin 2014-10-04 16:01:40

你也可以尝试'.thumbnail'类来均匀地分配空间他们http://getbootstrap.com/components/#thumbnails – timgavin 2014-10-04 16:02:43

嗨，对于一些重逢狭槽没有任何影响一个dth .thumbnail类也没有什么区别 - 但它确实给了一个很好的边界效应:) – 2014-10-04 16:21:17

我想它可能是你的图像的宽度。根据您的页面的宽度，大的图像将填补山坳及加强他们之间的排水沟

<div class="row" id="row1"> 
    <div class="col-xs-6"> 
     <img src="http://placehold.it/600x600" id="img1" class="img-responsive" alt="" /> 
    </div> 
    <div class="col-xs-6"> 
     <img src="http://placehold.it/600x600" id="img2" class="img-responsive" alt="" /> 
    </div> 
</div> 
<div class="row" id="Div1"> 
    <div class="col-xs-6"> 
     <img src="http://placehold.it/600x600" id="img3" class="img-responsive" alt="" /> 
    </div> 
    <div class="col-xs-6"> 
     <img src="http://placehold.it/600x600" id="img4" class="img-responsive" alt="" /> 
    </div> 
</div>

较小的图像会留下一个缺口

<div class="row" id="row1"> 
    <div class="col-xs-6"> 
     <img src="http://placehold.it/200x200" id="img1" class="img-responsive" alt="" /> 
    </div> 
    <div class="col-xs-6"> 
     <img src="http://placehold.it/200x200" id="img2" class="img-responsive" alt="" /> 
    </div> 
</div> 
<div class="row" id="Div1"> 
    <div class="col-xs-6"> 
     <img src="http://placehold.it/200x200" id="img3" class="img-responsive" alt="" /> 
    </div> 
    <div class="col-xs-6"> 
     <img src="http://placehold.it/200x200" id="img4" class="img-responsive" alt="" /> 
    </div> 
</div>

看到它在此琴：http://jsfiddle.net/timgavin/nmwuyhad/

来源

2014-10-04 16:59:51 timgavin

嗨，我的图像是为桌面浏览器设计我正在使用“img-responsive”auo规模我的图像为移动 - 这是。 – 2014-10-05 09:37:23

我说这个造型，以保证填充和利润率是零和它的工作：

<div id="col1" class="col-xs-6" style="padding: 0px; margin: 0px;">

来源

2014-10-05 09:40:40

这就是我在我的第一个评论:) – timgavin 2014-10-05 16:33:52

是的你做了哈哈！ – 2014-10-05 16:54:32

使用Bootstrap的图片宽度尺寸不正确

回答

相关问题