Html 创建宽度相同的按钮列表

我想创造的效果是这样的

在桌面上，有些机箱有1到3个按钮

如果有3个按钮，则应与主体的全宽相匹配，并在按钮之间留有边距

如果少于3个按钮，则应对齐中心

|[button 1] [button 2] [button 3]|

|       [button 1] [button 2]    |

在手机上，无论有多少个按钮，都要居中对齐

|       [button 1]    |
|       [button 2]    |
|       [button 3]    |

我已经使用引导网格进行了开发，但它似乎不适合动态情况：

按钮1
按钮2
按钮3

---

如何修改或简单地使用CSS更适合这种情况？非常感谢您的帮助。

然后您可以玩一些移动媒体查询

如果你能用，你可以 选中）以便可以使用以下css：

。相同宽度按钮{
文本对齐：居中！重要；
浮动：无！重要；
弹性：1；
}
@介质（最小宽度：768px）{
.行{
显示器：flex；
} 
}

按钮1
按钮2
按钮3

按钮1
按钮2

这是一个最简单的解决方案，在保持引导网格原理的同时，添加适当的类（无论您在哪里输出HTML代码或创建那些DOM元素）以偏移列

假设您希望您的按钮在桌面上始终为4列宽，您只需在第一列中添加适当的按钮，

.col-sm-offset-2

（

（12-2*4）/2

）用于两个按钮，而

.col-sm-offset-4

（

（12-1*4）/2

）仅用于一个按钮

---

如果动态添加这些类不是一个选项，那么您可以借助一种名为的技术实现

.button{
border: 1px solid black;
margin: 0 auto;
display:inline-block;
}
.cont{
text-align: center;
}