Javascript 如何使用HTML和CSS在一行上平均分割按钮？

在我的HTML代码中，我试图在模式中创建几个按钮。我正在为此使用引导。在页脚部分中，我试图在模式（或模式页脚）的宽度之间平均分割这些按钮

我可以使用引导列来实现这一点，但是填充（在包含

.col-*

类的元素之间）对于这个目的可能有点太大了。我可以指定一个宽度，但这并不能在可用空间中均匀地分割元素

这就是我迄今为止所尝试的：

$（文档）.ready（函数（）{
$（“.modal”）.modal（）；
});
.foo{
/*硬编码的宽度，我怎样才能使它在添加按钮时，宽度在按钮数量之间分割*/
浮动：左；
宽度：30%；
利润率：0.5px；
}
.酒吧{
/*无法使按钮居中：*/
保证金：0自动；
}

&时代；
情态标题
&hellip

按钮1
按钮2
按钮3
在条形图div上添加
显示：flex
，并添加
flex:1 0自动

你不需要30%的宽度

.bar {
  display: flex;
}

.bar > div {
  flex: 1 0 auto;
}


$（文档）.ready（函数（）{
$（“.modal”）.modal（）；
});
.foo{
利润率：0.5px；
}
.酒吧{
显示器：flex；
}
.bar>div{
弹性：10自动；
}

&时代；
情态标题
&hellip

按钮1
按钮2
按钮3
您可以使用此引导：

    <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
      <div class="btn-group mr-2" role="group" aria-label="First group">
        <button type="button" class="btn btn-secondary">Button 1</button>

      </div>
      <div class="btn-group mr-2" role="group" aria-label="Second group">
        <button type="button" class="btn btn-secondary">Button 2</button>

      </div>
      <div class="btn-group" role="group" aria-label="Third group">
        <button type="button" class="btn btn-secondary">Button 3</button>
      </div>
    </div>


按钮1
按钮2
按钮3

如果你想添加另一个按钮，你可以这样做

    <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
      <div class="btn-group mr-2" role="group" aria-label="First group">
        <button type="button" class="btn btn-secondary">Button 1</button>

      </div>
      <div class="btn-group mr-2" role="group" aria-label="Second group">
        <button type="button" class="btn btn-secondary">Button 2</button>

      </div>
      <div class="btn-group" role="group" aria-label="Third group">
        <button type="button" class="btn btn-secondary">Button 3</button>
      </div>
      <div class="btn-group" role="group" aria-label="Fourth group">
        <button type="button" class="btn btn-secondary">Button 4</button>
      </div>
    </div>


按钮1
按钮2
按钮3
按钮4
除了您在给定的
foo
类上使用
div
之外，这正是我想要的。是的，您可以使用.foo代替div。显然：）请给我一个实现这段代码的示例。当我尝试实现自己时，我只能看到按钮浮动到模式的左侧。如果你链接了bootstrap，Boss会在你的页面中使用此代码，并且你会看到结果。你可以从此链接获得帮助：Cooooool如果你查看我问题中的代码，你会注意到我没有使用bootstrap 4。此外，我不寻找按钮组。按钮组不是用于分页事务吗（而不是用于任何默认按钮）？上述功能（称为
btn工具栏
）对我不可用。