如何在引导程序 4 中将 div 与适当的空间对齐答案

【问题标题】：How to align div with proper space in between in bootstrap 4如何在引导程序 4 中将 div 与适当的空间对齐
【发布时间】：2020-10-05 15:51:03
【问题描述】：

如何将这 3 个 div 对齐到更多的边距？

我尝试了 col-3，但仍然不适合我，我希望 1 个 div 位于左侧，2nd 位于中心，3rd 位于右侧。我尝试使用 css 作为边距，但响应速度更差。我需要做响应部分吗？

检查这张图片，我想做这个..

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>General Announcement</title>
        </head>
        <body>

        <section class="activities">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <h3 class="text-center text-primary text-uppercase font-weight-bold mb-4">Upcoming activities for october 2019</h3>
                    </div>
                    <div class="col-md-3 mb-sm-5">
                        <img src="images/img-5.jpg" class="img-fluid">
                            <span class="d-block text-uppercase font-weight-bold mt-3">October 20</span>
                            <h4 class="text-uppercase font-weight-bold">Run for charity</h4>
                        <a href="#" class="btn btn-default btn-primary">More info</a>
                    </div>
                    <div class="col-md-3 mb-sm-5">
                        <img src="images/img-6.jpg" class="img-fluid">
                        <span class="d-block text-uppercase font-weight-bold mt-3">October 11</span>
                        <h4 class="text-uppercase font-weight-bold">Book drive</h4>
                        <a href="#" class="btn btn-default btn-primary">More info</a>
                    </div>
                    <div class="col-md-3">
                        <img src="images/img-7.jpg" class="img-fluid">
                        <span class="d-block text-uppercase font-weight-bold mt-3">October 21</span>
                        <h4 class="text-uppercase font-weight-bold">Recycling initiative</h4>
                        <a href="#" class="btn btn-default btn-primary">More info</a>
                    </div>
                </div>
            </div>
        </section>

        </body>
    </html>

【问题讨论】：

标签： html css bootstrap-4

【解决方案1】：

您需要包含 Bootstrap css。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>General Announcement</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>

<body>

    <section class="activities">
        <div class="container">
            <div class="row justify-content-between">
                <div class="col-md-12">
                    <h3 class="text-center text-primary text-uppercase font-weight-bold mb-4">Upcoming activities for
                        october 2019</h3>
                </div>
                <div class="col-md-3 mb-sm-5">
                    <img src="images/img-5.jpg" class="img-fluid">
                    <span class="d-block text-uppercase font-weight-bold mt-3">October 20</span>
                    <h4 class="text-uppercase font-weight-bold">Run for charity</h4>
                    <a href="#" class="btn btn-default btn-primary">More info</a>
                </div>
                <div class="col-md-3 mb-sm-5">
                    <img src="images/img-6.jpg" class="img-fluid">
                    <span class="d-block text-uppercase font-weight-bold mt-3">October 11</span>
                    <h4 class="text-uppercase font-weight-bold">Book drive</h4>
                    <a href="#" class="btn btn-default btn-primary">More info</a>
                </div>
                <div class="col-md-3">
                    <img src="images/img-7.jpg" class="img-fluid">
                    <span class="d-block text-uppercase font-weight-bold mt-3">October 21</span>
                    <h4 class="text-uppercase font-weight-bold">Recycling initiative</h4>
                    <a href="#" class="btn btn-default btn-primary">More info</a>
                </div>
            </div>
        </div>
    </section>

</body>

</html>

试试这个我希望这会奏效:)

【讨论】：

嗨，感谢您的帮助，我已经在使用引导 CDN，我只是没有在此处发布..但我找到了答案，但是感谢您的光临！ :)

【解决方案2】：

将 col-12 标题部分移到现在的行之外，并将行更改为 flex 列。 BS4 支持 flex，这是该用例的最佳选择。

这是fiddle

<section class="activities">
        <div class="container">
        <div class="col-md-12">
                    <h3 class="text-center text-primary text-uppercase font-weight-bold mb-4">Upcoming activities for october 2019</h3>
                </div>
            <div class="d-flex justify-content-between">

                <div class="col-md-3 mb-sm-5">
                    <img src="images/img-5.jpg" class="img-fluid">
                        <span class="d-block text-uppercase font-weight-bold mt-3">October 20</span>
                        <h4 class="text-uppercase font-weight-bold">Run for charity</h4>
                    <a href="#" class="btn btn-default btn-primary">More info</a>
                </div>
                <div class="col-md-3 mb-sm-5">
                    <img src="images/img-6.jpg" class="img-fluid">
                    <span class="d-block text-uppercase font-weight-bold mt-3">October 11</span>
                    <h4 class="text-uppercase font-weight-bold">Book drive</h4>
                    <a href="#" class="btn btn-default btn-primary">More info</a>
                </div>
                <div class="col-md-3">
                    <img src="images/img-7.jpg" class="img-fluid">
                    <span class="d-block text-uppercase font-weight-bold mt-3">October 21</span>
                    <h4 class="text-uppercase font-weight-bold">Recycling initiative</h4>
                    <a href="#" class="btn btn-default btn-primary">More info</a>
                </div>
            </div>
        </div>
    </section>

【讨论】：

嗨，有没有办法用 col-md-4 做呢？有那个空间？