Css 垂直堆叠时，引导按钮块更改对齐方式

我有两个按钮下面的一个btn块的形式。虽然表单足够宽，但我希望按钮并排（水平堆叠），并大致居中于表单下方

当屏幕宽度缩小时，最终按钮将垂直堆叠（由于btn块），但此时我希望将它们向左对齐，而不是它们的初始中心位置

目前，我只是使用另一列对它们进行偏移，所以我希望当它们垂直堆叠时，左边的列消失，或者用其他方法实现这一点。我本来想再做一个宽度一定但高度为零的按钮，但当我尝试使div始终保持在第一个按钮的左侧时，它不会与其他按钮垂直堆叠

当按钮水平堆叠时，如何将其居中，而当按钮垂直切换时，如何将其左对齐

更一般地说，我如何基于这个“切换”应用规则？当元素切换到垂直堆叠时，它们是否获得不同的类？我可以在其上应用更多规则

TIA

或者反过来说：

<div class="row">           
  <div class="col-md-6">
    <input class="btn btn-primary btn-block" value="Button One">
  </div>        
  <div class="col-md-6">
    <input class="btn btn-primary btn-block" value="Button Two">
  </div>
</div>

---

这就是你要找的东西吗？他有点困惑，整个表单是如何被包装在col-md-4中，以获得你想要的行为。希望其中一个

我不知道，一旦它们不再并排放置，您可以让它们自动向左对齐，但如果您为它们定义了一个特定的媒体查询断点，您可以这样做。因为每个按钮的最大宽度为170px，所以我应用了媒体查询，使它们在320px之前保持左对齐。似乎很符合要求

主要变化是： 1） 摆脱col-xs-1 div，因为按钮现在已经居中，所以它什么也不做。 2） 向“btn块”添加一个新类“btn对齐”，以便我们可以对其应用我们自己的自定义css

.btn-block.btn-alignment {
  text-align:left;
}
@media(min-width:320px) {
  .btn-block.btn-alignment {
    text-align:center;
  }
}

还将h5更改为标签，您应该使用标签定义表单上的输入。

'
'<style type="text/css">
/*Use the following code*/
@media(max-width:320px) {
  .btn-block .appBtn{
    display:block;
    margin:10px auto;
  }
}

/*-----or---------*/

@media(max-width:480px) {
  .btn-block .appBtn{
    display:block;
    margin:10px auto;
  }
}
</style>'

/*使用以下代码*/
@介质（最大宽度：320px）{
.btn块.appBtn{
显示：块；
利润率：10px自动；
}
}
/*-----或---------*/
@介质（最大宽度：480px）{
.btn块.appBtn{
显示：块；
利润率：10px自动；
}
}
'

我以为“btn块”意味着我不需要将每个按钮都放在自己的列中？我看到了其他类似的例子。btn-block是一个修饰符，指示元素跨越其父元素的整个宽度-我添加它是为了美观。如果您正在寻找引导解决方案来布局表单，请使用网格。否则，您将为此编写一个新类（使用浮点和媒体查询）——这也是网格所做的。谢谢。当按钮从水平方向切换到垂直方向，而不是在固定断点（链接320px）时，我该如何实现这一点？嗨@aaa90210我真的想不出一种方法来自动实现这一点。

.btn-block.btn-alignment {
  text-align:left;
}
@media(min-width:320px) {
  .btn-block.btn-alignment {
    text-align:center;
  }
}

'<style type="text/css">
/*Use the following code*/
@media(max-width:320px) {
  .btn-block .appBtn{
    display:block;
    margin:10px auto;
  }
}

/*-----or---------*/

@media(max-width:480px) {
  .btn-block .appBtn{
    display:block;
    margin:10px auto;
  }
}
</style>'