Question

我想在bootstrap div中的图像之间添加一个空格（空格）。

<div class="col-md-3">
    <img src="images/img1.jpg" class="img-responsive" alt=""/>
</div>
<div class="col-md-3">
    <img src="images/img2.jpg" class="img-responsive" alt=""/>
</div>
<div class="col-md-3">
    <img src="images/img3.jpg" class="img-responsive" alt=""/>
</div>
<div class="col-md-3">
    <img src="images/img4.png" class="img-responsive" alt=""/>
</div>

如果我添加style="margin: 2px;"，它会将最后一张图像推到行外。

Answer 1

在bootstrap3 col-*类已经有padding:15px。所以我认为没有必要增加额外的空间。

但是如果要在图像之间添加更多间距（padding或margin），请尝试将图像包装到另一个div中，然后使用margin或padding值div ......或者在图像中应用填充或边距......你会得到结果。

现在margin:2px将最后一张图片推送到下一行，因为目前您的col宽度为25%，即该行的宽度(25*4=100%) ...如果您应用{{ 1}}到margin:2px，col的宽度为col，导致25%+2px到整行，因为 边距始终应用于在框外，填充内部应用 ...这就是为什么你的上一个100%+8px被推到下一行......

Stack Snippet

＆＃13;

col

＆＃13;

.wrapper {
  padding: 0;
  /* put your padding here */
}

＆＃13;

Answer 2

我会建议不要在网格元素中添加填充。 Bootstrap网格有自己的填充。像这样使用数字元素

<div class="images row">
<div class="col-md-3">
    <figure><img src="images/img1.jpg" class="img-responsive" alt=""/></figure>
</div>
</div>

和样式

.images figure {
    padding: 10px;
    /* display: block; */
    background: #000;
    display: inline-block;
}

演示网址：https://output.jsbin.com/jejeho

Answer 3

使用嵌套列，默认情况下会在图像之间创建空格

<div class="row">
  <div class="col-md-3">
    <div class="col-md-12">
        <img src="images/img1.jpg" class="img-responsive" alt=""/>
    </div>
  </div>
  <div class="col-md-3">
    <div class="col-md-12">
        <img src="images/img2.jpg" class="img-responsive" alt=""/>
    </div>
  </div>
  <div class="col-md-3">
    <div class="col-md-12">
        <img src="images/img3.jpg" class="img-responsive" alt=""/>
    </div>
  </div>
  <div class="col-md-3">
    <div class="col-md-12">
        <img src="images/img4.jpg" class="img-responsive" alt=""/>
    </div>
  </div>
</div>

以下是占位符图片的示例

https://codepen.io/anon/pen/mXOaev?page=1&

Answer 4

试试这个。
设置父div的填充。

<div class="col-md-3" style="padding:10px;">
    <img src="images/img1.jpg" class="img-responsive" alt=""/>
</div>

在图像之间添加填充

4 个答案: