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

Posted 2023-03-06

【中文标题】引导容器中的 4 个均匀间隔按钮

【英文标题】：Bootstrap 4 evenly space buttons in container

【发布时间】：2017-11-23 16:02:40

【问题描述】：

难道没有一种简单的方法，甚至可以使用 flexbox 将 3 个按钮均匀分布在一个 div 中吗？我是 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;

【问题讨论】：

检查我刚刚写的这个答案：***.com/questions/44664033/… - 在你的情况下 - 按钮可能需要内联块。

【参考方案1】：

简单的弹性盒应该是：

.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 的当前文档。

【讨论】：

其实，使用 BS4，你可以简单地做 align-items-center justify-content-md-center

@Mark：这会将justify-content:center 应用于md 响应间隔及以上的按钮，这不会“在单个div 内均匀分布3 个按钮” .它会将它们固定在 div 的中心，而不会均匀地分配可用空间。我是否误解了要求？

我认为 Bootstrap 没有任何我们可以直接使用的“空间均匀”类。

@indrajeet，它没有。我从没说过会。但是您可以使用 CSS 将其应用于您的元素。这个答案是两年前提供的，当时space-evenly 的浏览器支持真的很差。那时仅有的两个选项是space-around 和space-between。今天活动，IE不提供space-evenly支持。

【参考方案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 实用程序中不支持此值。