如何使用 bootstrap 2.3.2 在跨度中水平居中表格？答案

【问题标题】：How to horizontally centre form in span with bootstrap 2.3.2?如何使用 bootstrap 2.3.2 在跨度中水平居中表格？
【发布时间】：2014-02-18 15:32:57
【问题描述】：

我有以下代码...

<div class="row">
  <div class="span6">
    <h2>Some Text</h2>
  </div>
  <div class="span6">
    <form class="form-inline pull-right">
      <input type="text" class="input-large">
      <button type="submit" class="btn">Search</button>
    </form>
  </div>
</div>

...但搜索表单与 h2 标记不一致。我是否需要通过 css 自定义表单样式，或者我错过了一些默认的 Bootstrap 类来解决这个问题？

非常感谢您花时间阅读/回答此问题。

[编辑]

http://jsfiddle.net/nuB23/

添加了 jsfiddle

【问题讨论】：

你能提供一个小提琴来演示这个问题吗？
jsfiddle.net/nuB23

标签： html css forms twitter-bootstrap

【解决方案1】：

删除表单上的pull-right 类。另一个问题是 h2 有额外的填充并且是块级的。我认为你真正追求的是：

<div class="nav"> </div>

<div class="container">
    <form class="form-horizontal ">
        <div class="control-group  ">
            <label class="control-label large" for="searchInput">Label text:</label>
            <div class="controls search">
                <div class="input-prepend "> <span class="add-on"><i class="icon-search"></i></span>
                    <input type="text" id="searchInput"  />
                    <button type="submit" class="btn btn-primary">Search</button>
                </div>
            </div>
        </div>
    </form>
</div>

http://jsfiddle.net/dbrin/AV654/

【讨论】：

感谢 dbrin，但 class="nav" 的空 div 的目的是什么？
只是一个可能的顶部菜单的占位符，不需要它，只是将主要内容向下推到屏幕顶部。

【解决方案2】：

尝试添加这种样式：

[class*="span"], h2 {
    display: inline;
}

Updated Fiddle

【讨论】：