Question

这是我网站的正文:(使用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，但是当我将span类设置为它们时，它们会突破到新行，第一行上的文本和另一行上的输入提交线。为了使它们在同一条水平线上，我能做什么/应该做什么？

Answer 1

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

似乎bootstrap不会使输入范围浮动：github forms.less

以下是您可以使用的内容：

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

修改

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

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

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

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

或者，您可以使用very soon或version 2.1

中可用的.offsetX流量

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

类

{{1}}

in this gist

Twitter Bootstrap设置输入文本流体大小不起作用

1 个答案:

修改