搜索表单在响应式Twitter Bootstrap站点中分解

Question

我正在使用Twitter Bootstrap创建响应式网站。我喜欢框架工作，一切正常，除了我在标题中的搜索表单。它的大小和扩展超过7个网格，当我使窗口小于大约512 px时，提交按钮突然滑入输入区域下方，这不是很整洁。我正在使用“形式水平”类，文档建议我应该使用它。

以下是表单部分的代码。任何帮助非常感谢！

<div class="row">
<div class="span7">



<form class="form-horizontal" id="searchfield" action="search.php" method="get">

 <input  name="address" placeholder="Write something..." type="text" class="span7 search-query field">
 <button type="submit" class="btn-primary">Search</button>

</form>


</div>


<div class="span4">
<a href="form1.php"><button type="submit" class="btn btn-large btn-inverse span4">Skapa    boende</button></a>
</div>

</div>

Answer 1

什么引导响应做的是它使网站“响应”用户的viewport。这意味着如果视口的宽度跳到给定点以下，则布局会发生变化。响应表定义.span1-12将不再浮动，低于该特定点。因此将一个放在另一个之下。

如果您不希望发生这种情况，您必须：a。删除响应表，或b。做一些疯狂的丑陋变通办法。最后一个是你不应该做的。虽然，它可能会起作用，它破坏功能的可能性非常大。

尽管如此，可能还有值得一提的东西。有一个人（阿诺德丹尼尔斯）为引导创造了一些巧妙的扩展，包括他称之为'desktop row'的东西。它只是一排，但响应式更改始于平板电脑视口。这不是您想要的，但它表明您可以更改响应表。