Html 引导：使按钮宽度为33%，当窗口太小时为100%

我有三个按钮，我希望它们在同一条线上，占据所有的空间，每个按钮的大小必须相同。 一旦窗口太小，无法显示每个按钮至少170px的宽度，我希望每个按钮都有自己的线条，并占据100%的宽度。 我记得看到过一些有导航栏的网站，它们的工作原理有点像这样

这就是我的代码当前的样子：

        <div class="modal-body"> 
          <button style="min-width:33%;width:170px" type="submit" class="btn btn-primary btn-group">Button A</button><span></span>
          <button style="min-width:33%;width:170px" type="submit" class="btn btn-primary btn-group">Button B</button><span></span>
          <button style="min-width:33%;width:170px" type="submit" class="btn btn-primary btn-group">Button C</button>
        </div>

第一部分似乎工作正常，但当窗口太小时，按钮的线条宽度不会达到100%：

---

有没有一种自举方法可以实现这一点？或者css黑客是必要的

如果您使用的是引导，那么您应该能够使用“col”CSS选择器

你应该能够应用一个容器或行类，这取决于你想填充多少屏幕，然后应用'col-md-4 col-sm-12'，这取决于你想让它100%移动到所有你不应该像上面的例子那样写CSS内联的按钮使用引导类

---

链接到引导文档

您需要向css添加媒体查询

button{
    width: 170px
}
@media (max-width: 540px){
     button{
         width: 100%;
     }
}

---

为了获得最佳效果，请向button添加一个父类

，我将重写HTML，使其看起来像这样

<div class="modal-body"> 
    <div class="row">
        <div class="col-lg-4 col-sm-12">
            <button style="width:100%" type="submit" class="btn btn-primary btn-group">Button A</button>
        </div>
        <div class="col-lg-4  col-sm-12">
            <button style="width:100%" type="submit" class="btn btn-primary btn-group">Button A</button>
        </div>
        <div class="col-lg-4  col-sm-12">
            <button style="width:100%" type="submit" class="btn btn-primary btn-group">Button A</button>
        </div>
    </div>       
</div>

---

请参阅引导网格系统文档，以了解有关不同大小的Col设置的更多信息

---

看起来方向正确，但现在窗口需要非常宽，才能在同一行上显示按钮：将col-lg-4 col-sm-12替换为col-xs-12 col-sm-4或col-xs-12 col-md-4，具体取决于您希望更改的设备大小。这样更好，但仍然不是我要求的每个按钮170px。col-md-4 col-sm-12中的值到底有什么作用？你有这部分文档的链接吗？