Css 引导4个在容器中均匀间隔的按钮

难道没有一个简单的方法，甚至可以使用flexbox在一个div中均匀分布3个按钮吗？我对flexbox还不熟悉，在我更习惯它之前，我仍在努力确定何时不使用它。无论哪种方式，我的html（实际上是React中的JSX）是：

<div className="container">
    <div>
        <p>Ea commodo tempor magna incididunt fugiat reprehenderit laboris excepteur velit labore. Commodo dolore cillum commodo eu cillum est minim ad. Laboris proident sint anim reprehenderit fugiat pariatur nulla reprehenderit veniam duis adipisicing cupidatat laboris consequat. Reprehenderit laboris nostrud nulla cillum qui in laborum exercitation est do. Quis esse consectetur ex nisi. Nulla veniam nisi cillum cillum in in ipsum sit et labore elit cillum occaecat. Eu quis excepteur quis exercitation ut pariatur laboris in ex cupidatat irure officia tempor cillum.Voluptate Lorem id Lorem elit ipsum do cillum elit. Consectetur consectetur quis do mollit aliqua reprehenderit elit. Est dolor tempor exercitation nisi. Deserunt nulla elit qui pariatur officia pariatur aute elit culpa laborum incididunt laborum. Voluptate eiusmod voluptate elit dolore aliqua eu esse non qui voluptate elit ipsum est fugiat. Qui mollit exercitation aliqua ad occaecat id elit dolor et. Mollit aliquip ullamco ut labore. Cupidatat anim eu do ipsum enim ea. Eu incididunt qui eiusmod ipsum qui voluptate. Est esse eu ipsum fugiat dolore excepteur aliquip sint fugiat ipsum sunt aliquip exercitation.</p>
    </div>
    <div className="vol-ctr">
        <Button color="primary">
            <Icon name="users" />Manage Users
        </Button>
        <Button color="primary">
            <Icon name="cog" />Manage Configuration
        </Button>
        <Button color="primary">
            <Icon name="code" />Documentation
        </Button>
    </div>
</div>

---

简单的flexbox是：

.vol-ctr {
   display: flex;
   justify-content: space-around;
}

---

或者围绕d-flex类应用

justify内容。请注意，没有第二个选项，第一个选项不起作用（
justify content
没有
display:flex
）



以下是引导v4中的当前文档。
除了Andrei Gheorghiu接受的答案之外，flex justify content属性还有一个可能的值，据我所知，它可能更适合您的需要：

.vol-ctr {
   display: flex;
   justify-content: space-evenly;
}

请在此处阅读更多信息：

从v4.1开始，Bootstrap 4在
justify content
实用程序中不支持此值。
检查我刚才写的答案：--在您的情况下，按钮可能需要内联块。实际上，使用BS4，您只需将项目中心对齐即可-center@Mark：这会将
justify content:center
应用于
md
响应间隔及以上的按钮，这不会“在单个div中均匀分布3个按钮”。它会将它们粘在div的中心，而不会均匀分配可用空间。我是否误解了这个要求？我认为Bootstrap没有任何可以直接使用的“空间均匀”类。@indrajeet，没有。我从来没说过是的。但是您可以使用CSS将其应用于您的元素。这一答案是两年前提出的，当时
的浏览器支持非常差。在这一点上，只有两个选项是
周围的空间和

之间的空间。今天的活动，IE没有提供均匀的

空间

支持。

<!-- -->
  <div className="vol-ctr d-flex justify-content-around">
    <!-- -->

.vol-ctr {
   display: flex;
   justify-content: space-evenly;
}