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

【问题标题】：How can I center the content of a col-xs-12 column in bootstrap如何在引导程序中将 col-xs-12 列的内容居中
【发布时间】：2016-04-17 03:41:50
【问题描述】：

我有一个输入框和一个按钮。我希望按钮位于所有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 像素上产生以下正确行为：

但在

如何使col-xs-12 div 的内容居中？我已经尝试过center-block 和col-centered 引导CSS 类，它们似乎都不起作用？

---编辑--- 如果我将 text-center 添加到 col-xs-12 div，它会正确地将按钮元素居中，但也会使 col-sm-2 div 中的按钮居中，并且按照这张图片：

如何使按钮恰好位于输入文本字段的右侧，并且在具有

【问题讨论】：

标签： jquery html css twitter-bootstrap

【解决方案1】：

请在您的 div=col-xs-12 上添加“文本中心”类

对齐元素中心是默认的引导类

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

【讨论】：

只需使用属性定义类 .classname{ margin: 0 auto;显示：块；宽度：768px；您也可以在媒体查询中设置此类@media (max-width:767px)

【解决方案2】：

将 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">

【讨论】：

这行得通，除了它将按钮也居中在 col-sm-2 div 中。理想情况下，我希望“加入”按钮位于输入框的末尾，并且在设备
嗯，在这种情况下你可以使用@david-wilkinson 's example

【解决方案3】：

试试下面的例子：

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

CSS：

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

对于 input 设置为在左/右显示为块和自动边距 - 这意味着在这种情况下，它以类 input-position 的 100% 宽度父级 <div> 为中心。

【讨论】：