[bootstrap]按钮不使用中心块在窄屏幕中居中

Question

https://jsfiddle.net/c5befo3h/2/

整个讨论基于上面的jsfiddle。

1. 我不明白为什么按钮向左移动而不是只有标准btn btn-default类的中心。
   https://jsfiddle.net/c5befo3h/

2. 我添加center-block以使按钮居中。这是推荐的方式吗？如果是这样，当我缩小屏幕时，按钮开始不居中。

   （1）由于padding，我发现了这一点 （2）它溢出
   如何避免（1），（2）？

3. 我想要的结果是，如果屏幕足够宽，按钮是水平的，并且在所有情况下垂直对齐 对于窄屏幕，它会下降到下一行，水平和垂直对齐 如何根据父高度归档垂直对齐 很抱歉在这里提出一个不同的问题，但我在stackoverflow上遇到了类似的问题，但仍然没有解决方案。

非常感谢

Answer 1

这是你想要的结果吗？

我已将列大小更改为点md屏幕，并将其在xs屏幕上的显示方式分开。

对于按钮对齐，填充应该有效。

div {
  border: solid 1px red
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <h2>Vertical (basic) form</h2>
  <div class='row'>
    <div class='col-xs-12 col-md-5 form-group'>
      <label for="email">Email:</label>
      <input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
    </div>
    <div class='col-xs-12 col-md-5 form-group'>
      <label for="pwd">Password:</label>
      <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
    </div>
    <div class='col-xs-12 col-md-2'>
      <button class="btn btn-default center-block">Submit</button>
    </div>
  </div>
</div>

Answer 2

非常有趣的问题。我不知道为什么会这样，但我能够解决它：

如果你给“col-md-2”另一个类并给该类填充零，它就可以解决问题。

.padding-right-col-2 {
padding-right: 0;
}

Answer 3

对于垂直对齐，请查看黑客的日志以进行自举 我提供的最佳解决方案是使用flexbox。

注意：因为它不适用于xs，仅适用于大于xs的屏幕尺寸

@media (min-width: 768px) {
.vertical-align {
    display: flex;
    align-items: center;
}
}
@media (min-width: 768px) {
.vertical-align > div {
margin: auto;
}
}  

更新版本：
the documentation