如何在使用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>

希望能有所帮助。