Question

我是初学者并使用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：

＆＃13;

.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;
}

＆＃13;

Answer 1

非常感谢@Skelly：我已经纠正了新手错误（你已经指出）并且它现在有效：）

所以HTML更正是：

“类属性只能在标记中使用一次
并删除img标签中的分号“

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

我现在唯一的CSS：

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

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

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

Bootstrap

1 个答案: