如何在引导程序中将col-xs-12列的内容居中

Question

我有一个输入框和一个按钮。我希望所有按钮都位于输入框的右侧devices > 768 px。

因为devices <=768 px我希望按钮位于col-xs-12中心对齐的输入框下方。

到目前为止，这是我的尝试：

<form id="signup-form" class="new_invitation" action="/invitations" accept-charset="UTF-8" method="post">
  <div class="col-sm-4 col-sm-offset-3 input-position">
    <input class="form-control full-width" placeholder="enter email address" id="InputEmail" type="text" name="invitation[recipient_email]">
  </div>

  <div class="col-xs-12 col-sm-2 input-position">
   <input type="submit" name="commit" value="JOIN IN" class="btn btn-cta" id="gabetabtn">
  </div></form>

这将导致以下devices > 768像素正确行为：

但是，在<= 768像素的设备上，按钮未居中，但正确位于输入框的下方：

如何将col-xs-12div 的内容居中？我尝试过center-block并col-centered引导CSS类似乎都不起作用？

---编辑--- 如果我在col-xs-12 div中添加text-center，它将正确地使按钮元素居中，但同时也将按钮在col-sm-2 div中居中，也如下图所示：

在具有<= 768像素的设备上，如何使按钮恰好位于输入文本字段的右侧，并且也位于输入文本字段下方的行的中心？

Answer 1

将Bootstrap添加text-center到包含以下内容的类中col-xs-12

因此更改此行：

<div class="col-xs-12 col-sm-2 input-position">

对此：

<div class="col-xs-12 col-sm-2 input-position text-center">

Answer 2

尝试以下示例：

https://jsfiddle.net/7frqL6rv/1/

CSS：

@media (max-width: 767px) {
  .input-position input {
    margin: 0 auto;
    display: block;
  }
}

对于 <= 767px 的视口，input设置为在左/右显示为块和自动边距 - 这意味着在本例中它以类的 100% 宽度父级为<div>中心input-position。