1

这是我网站的正文：（使用 twitter bootstrap 2.0）

<div class="container">
  <div class="row-fluid" style="text-align: center">
    <div class="span12">
      <div class="page-header">
        <h1>Header</h1>
      </div>
      <form class="well form-search">
        <input type="text" class="span7 input-large search-query" />
        <button type="submit" class="span3 btn btn-primary" >Search</button>
      </form>
    </div>
  </div>
</div>

我希望文本和提交按钮居中并以 7:3 流畅，但是当我将跨度类设置为它们时，它们会换行，第一行的文本和另一行的输入提交。为了使它们位于同一水平线上，我可以/应该做什么？

4

1 回答 1

2

更新 版本 2.1.0已经发布，因此您应该检查下面的偏移解决方案，因为它在此版本中默认提供（可能还有未来的版本）

似乎引导程序不会使输入跨度浮动：github forms.less

所以这是你可以使用的：

.form-span input[type="text"][class*="span"] { float: left; }

编辑

对于流动性，您需要使用 a.container-fluid因为.container具有固定的大小（这使得固定内部的流体网格）。

对于居中，我看到 2 个解决方案：

使用内联文本居中：（绝对不是最佳选择）

.inline-center { text-align: center!important; }
.inline-center [class*="span"] { float: none!important; display: inline-block!important; }

或者你可以使用流体.offsetX类，它很快就会在2.1 版或这个 gist中可用

<input type="text" class="offset1 span7 input-large search-query" />
<button type="submit" class="span3 btn btn-primary" >Search</button>

演示（jsfiddle）

于 2012-08-11T07:53:16.667 回答