使用Bootstrap 4.2创建多列时如何创建空间

Question

我使用bootstrap 4.2

我有四列，但是我在空白处尝试了空间，但是我发现粘在一起。

我使用类col, col-sm-3, card，但没有成功

<div class="row">
    <div class="bg-primary text-center p-5 col bg">
        <a class="text-white" href="">Car</a>
    </div>
    <div class="bg-info text-center p-5 col bg">
        <a class="text-white" href="">House</a>
    </div>
    <div class="bg-danger text-center p-5 col bg">
        <a class="text-white" href="">Mobile</a>
    </div>
    <div class="bg-warning text-center p-5 col bg">
        <a class="text-white" href="#">Laptop</a>
    </div>
</div>

Answer 1

您是否尝试过创建自定义类并为其添加margin-right: 10px;作为CSS规则？

示例：

<div class="row">
    <div class="bg-primary custom text-center p-5 col bg">
        <a class="text-white" href="">Car</a>
    </div>
    <div class="bg-info custom text-center p-5 col bg">
        <a class="text-white" href="">House</a>
    </div>
    <div class="bg-danger custom text-center p-5 col bg">
        <a class="text-white" href="">Mobile</a>
    </div>
    <div class="bg-warning custom text-center p-5 col bg">
        <a class="text-white" href="#">Laptop</a>
    </div>
</div>

并在您的CSS文件中：

.custom {
  margin-right: 10px;
}

Answer 2

如果您使用的是台式机，则应在每列之间显示一个空格

<div class="row">
<div class="bg-primary col-md-3 text-center p-5 bg">
    <a class="text-white" href="">Car</a>
</div>
<div class="bg-info col-md-3 text-center p-5 bg">
    <a class="text-white" href="">House</a>
</div>
<div class="bg-danger col-md-3  text-center p-5 bg">
    <a class="text-white" href="">Mobile</a>
</div>
<div class="bg-warning col-md-3  text-center p-5 bg">
    <a class="text-white" href="#">Laptop</a>
</div>
</div>

希望有帮助。