html - [bootstrap] 按钮不在使用中心 block 的窄屏幕中居中

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>