如何在引导程序

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像素的以下正确行为：

然而，在设备＆lt; = 768像素的情况下，按钮不居中但正好在输入框下方：

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

--- --- EDIT 如果我将文本中心添加到col-xs-12 div，它会正确地将按钮元素居中，但也会将按钮放在col-sm-2 div中以及按照这个图片中心：

当在＆lt; = 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

请在div = col-xs-12

上添加'text-center'类

它是默认的bootstrap类来对齐元素中心

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

Answer 3

尝试以下示例：

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

CSS：

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

对于视口＆lt; = 767px，input设置为在左/右显示为块和自动边距 - 这意味着它以100％宽度父<div>为中心在这种情况下，等级input-position。