主页 / coding / 问题 / 77713827
Accepted
Daksh Rawal
Asked: 2023-12-25 21:30:42 +0800 CST

CSS Flex（BootStrap 行）

  • 772

如何在下图中的 4 个 div 之间添加间距

在此输入图像描述

在这里你可以看到 4 个 div 彼此相邻对齐

单个 div 的代码是：

<div class="col-lg-3 col-md-4 col-sm-6 mb-5 text-center">....</div>

这些 div 的父级是：

<div class="d-flex row mx-auto" style={{ justifyContent: "space-around",alignContent:'center' }}>
....
</div>

完整的树是：

<div className="container mt-5 mb-5">
    <div class="d-flex row mx-auto" style={{ justifyContent: "space-around",alignContent:'center' }}>
        <div class="col-lg-3 col-md-4 col-sm-6 mb-5 text-center">
         ....
         ....
        </div>
    </div>
</div>
html

1 个回答

  1. Best Answer

    您是否尝试过为各个 div 添加边距？

    <div class="col-lg-3 col-md-4 col-sm-6 mb-5 text-center" style="margin: 10px">....</div>

    一旦它起作用，您可以稍后扩展到自定义类。

    .spacing {
  margin: 10px;
}


<div class="col-lg-3 col-md-4 col-sm-6 mb-5 text-center spacing">....</div>
    • 1

相关问题