Question

是不是有一种简单的方法，甚至可以使用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>

和CSS至少在中心得到这个：

.vol-ctr {
  text-align: center;
}

Answer 1

简单的flexbox将是：

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

或申请justify-content-around d-flex课程。请注意，第一个没有第二个不起作用（justify-content没有display:flex没有效果。）

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

以下是Bootstrap v4中Flexbox的当前文档。

Answer 2

根据我的理解，除了Andrei Gheorghiu接受的答案之外，flex justify-content属性还具有另一个可能更适合您的需求的可能值：

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

在此处详细了解：https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content

从v4.1开始，Bootstrap 4在justify-content实用程序中不支持该值。

Bootstrap 4容器中的均匀空间按钮

2 个答案: