使用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的圖片寬度尺寸不正確

回答

相關問題