搜索表单在响应推特引导网站中分解

Question

我正在使用Twitter Bootstrap创建一个响应式网站。我喜欢框架工作，一切都很好，除了我在标题中的搜索表单。它有点大，可以扩展到7个网格，当我把窗口缩小到小于512像素时，提交按钮突然滑到输入区域下面，这不是很整齐。我使用的是"form horizontal"类，文档建议我应该使用它。

这是表单部分的代码。非常感谢您的帮助！

<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

bootstrap responsible的作用是使站点对用户的视口做出"响应"。这意味着，如果视口的宽度跳到给定点以下，布局就会发生变化。响应表定义.span1-12将不再浮动，低于该特定点。因此，将一个置于另一个之下。

如果你不想发生这种情况，你必须：a.删除响应表，或者b.做一些疯狂而丑陋的解决方案。最后一个，是你不应该做的。不过，它可能会起作用，破坏功能的可能性非常大。

不过，也许还有一些值得一提的地方。有一个人（阿诺德·丹尼尔斯饰）为bootstrap创建了一些巧妙的扩展，包括他所说的"桌面行"。这只是一行，但响应性更改从平板电脑视口开始。这不是你想要的，但它表明你可以更改响应表。