Css 按钮在xs视口中重叠，因为无法自动调整大小

我有一行（带有类的div标记是

col-xs-6

），有两列宽度相同。在每列中，都有一个自动调整大小的按钮，最大宽度为150px，具体取决于其中文本的长度。所以我在按钮中输入了很长的文本，所以它们的最大宽度相同，即150px。然后我自动将窗口调整为xs视口，直到一个大小（我认为窗口的宽度小于300px加上填充），然后按钮彼此重叠

input[type=“submit”]{
位置：相对位置；
最小高度：34px；
保证金：0自动；
最小宽度：80px；
最大宽度：150px；
填充：0 10px；
宽度：自动；
显示：块；
边界半径：5px；
背景色：#ff7900；
颜色：白色；
边框：1px实心#ff7900；
}
.nf填充控制输入[type=“submit”]{
显示：内联块！重要；
}
.nf按钮{
显示：内联块；
位置：相对位置；
颜色：白色；
}

它不会重新调整大小的原因是因为它们的宽度和高度是静态的，因为您使用像素作为格式。将px的所有功能更改为vw和vh。您还应该添加
top:0px；左：0px；绝对位置到css，然后使用
变换：translate（0-100vw，0-100vh）移动它

这将确保它不会四处移动，并正确调整大小：-）