0

我正在使用 Twitter Bootstrap 创建一个响应式网站。我喜欢框架工作，一切正常，除了标题中的搜索表单。它有点大，扩展了 7 个网格，当我将窗口设置为小于 ca 512 px 时，提交按钮突然滑到输入区域下方，这不是很整洁。我正在使用文档建议我应该使用的“form-horizo​​ntal”类。

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

<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>
4

1 回答 1

0

bootstrap responsive 的作用是让网站“响应”用户的viewport。这意味着如果视口的宽度低于给定点，布局就会改变。响应表定义.span1-12将不再浮动，低于该特定点。从而将一个置于另一个之下。

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

不过，可能有一些值得一提的事情。有一个人（阿诺德丹尼尔斯）为引导程序创建了一些简洁的扩展，包括他称之为“桌面行”的东西。这只是一行，但响应式更改从平板电脑视口开始。这不是您想要的，但它表明您可以更改响应表。

于 2013-02-14T16:52:52.680 回答