Question

使用bootstrap 3。

我有4个img元素。

两张图片 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

Answer 1

我认为它可能是你图像的宽度。根据页面的宽度，大图像将填充色块并收紧它们之间的装订线

<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/

Answer 2

我添加了这个样式以确保填充和边距为零并且它起作用：

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

使用Bootstrap的图像宽度不正确

2 个答案: