Bootstrap 中的图像之间缺少空格答案

【问题标题】：Missing space between images in BootstrapBootstrap 中的图像之间缺少空格
【发布时间】：2016-10-30 18:58:20
【问题描述】：

我是初学者，使用 Bootstrap 4。我已经完成了这个页面：https://www.bitballoon.com/sites/stoker-austin-77536

我只想在图像之间留一些空白。

我尝试了无数的技巧（无济于事），即其中一些：

我还尝试在 .img .img-fluid 上添加 Padding（我现在已将其删除）

我的 HTML：

<div class="container">

<div class="row">
    <div class="col-md-9">
        <div class="add-padding" class="p-b-2">
            <img src="../img/featured_image_grey1.jpg" class="img-fluid" alt="Responsive image">
        </div>
    </div>
</div> 

<div class="row">
    <div class="col-md-9">
    <div class="add-padding">
    <img src="../img/featured_image_grey1.jpg" class="img-fluid" alt="Responsive image">
    </div>
    </div>
</div> 

<div class="row">
<div class="col-md-9">
    <img src="../img/featured_image_grey1.jpg" class="img-fluid" alt="Responsive image">
</div> 
</div>

我的 CSS：

.p-b-2 {
  padding-bottom: ($spacer-x * 2) !IMPORTANT;
  padding-bottom: ($spacer-y * 2) !IMPORTANT;
}
.add-padding {
	padding-bottom: 20px !IMPORTANT; 
	margin-bottom: 20px !IMPORTANT;
}
.row .col-md-9 .add-padding{
	padding-bottom: 20px !IMPORTANT;
}
img *{
	padding-bottom:20px !IMPORTANT;
}

【问题讨论】：

外部链接需要登录。 HTML 标记有一些问题，比如 class 属性只能在标签中使用一次，而分号在 img 标签中。创建一个像这样的最小示例codeply.com/go/o3WdEMPo5l

标签： image twitter-bootstrap vertical-alignment space

【解决方案1】：

非常感谢@Skelly：我已经更正了新手错误（你已经指出），现在它可以工作了 :)

所以 HTML 更正是：

"class 属性只能在标签中使用一次
并删除 img 标签中的分号"

我创建了我的 Codeply： http://www.codeply.com/go/ZZaV7zlnVO

我现在唯一的 CSS 是：

.col-md-9 {
padding-bottom: 40px !IMPORTANT;}

问题来自上面提到的 HTML 错误。我有不必要的 CSS（因为我尝试了很多 CSS 技巧，但不知道 HTML 是问题的根源）。我现在已经简化了 CSS（见上文）。

注意：我只使用了一周的 Bitballoon，并不知道它受密码保护 - 抱歉。

【讨论】：