Bootstrap 4.0 - 如何删除元素下面的填充？

Question

最近，我在bootstrap（ver 4.0）周围进行了实验。我有一些小问题，尤其是关闭位置垂直对齐。使用Google Chrome元素检查时，我发现总金额以下有填充（以下面显示的橙色突出显示）：

这个代码是：

    <div class="input-group w-25 float-right">
        <label for="number">Total Amount: </label> 
        <span class="input-group-addon">$</span>
        <input type="number" class="form-control" aria-label="Amount">
    </div>

和另一个是这样的： 哪里有垫子低于12.00美元和蓝色按钮“买我！”

页脚div的元素似乎偏离垂直对齐：

当我使用Google Elements检查元素时，我发现有填充物：低于12.00美元和蓝色按钮“买我！

这些代码是

    <div class="card-footer border-success">
          <h6 class="card-subtitle mb-2 text-muted">$12.00/kg </h6> 
            <div class="input-group">
                <input type="text" class="form-control" placeholder="1" aria-label="unit" aria-describedby="basic-addon2">
                <span class="input-group-addon" id="basic-addon2">units</span> 
                <a href="#" class="btn btn-primary">Buy me!</a>
            </div>
    </div>

所以，我的问题是有什么方法可以删除底部的额外填充以使div中的所有元素彼此对齐？

Answer 1

只需使用Bootstrap 4 spacing utils ..

pb-0 = padding-bottom: 0;

或

mb-0 = margin-bottom: 0;