Html 将手机搜索栏与bootstrap 3对齐

在升级到Bootstrap3时，我正在处理的一个站点的很多布局都需要修复。我已经设法修复了大部分内容，但是页面的最后一个元素似乎不在我的掌握之中

下面是我的问题示例：

就桌面版而言，它运行良好。但是，如果水平收缩页面（模拟为“移动”版本），按钮会在两个方面出错：

在平板电脑大小（768px-979px）时，它不再与其他按钮对齐。我假设这是一个模糊的宽度问题，但我似乎无法准确指出它

手机大小(

您分配了错误的类别，它应该是

col-sm-2

而不是

col-md-2

到

div#searchBar

丢失

div.input-fields

并将

.form inline

类添加到

标记中，将

.form group

添加到表单元素中，如下所示：

PS很抱歉格式化，我这边有些不对劲

编辑

从引导文档中：

在引导中，输入、选择和文本区域默认为100%宽。 要使用内联表单，必须在表单上设置宽度 在中使用的控件

---

因此，只需按照示例代码，添加必要的

.form control

标记并为其分配宽度。

您可以使用列大小包装

输入组

类，例如

---

不要忘记将

表单控件

类添加到您的

输入

标记中。

我相信上次我尝试此操作时，它不起作用。我将释放两个答案的尝试。但是，这一个仍然会导致按钮未连接的问题。这是根据引导文档进行的，并且在进行更改时确实对我起到了作用正在浏览firebug，但显然与您的环境不同。@Rogue在template_2.html上的代码中有错误。请查看class=“form control”在输入上，它之间有空格，没有被应用。我想你看到的表单是错误的。搜索栏上没有

表单控件，这是由时事通讯注册决定的。编辑：奇怪，它不在我的IDE中，但在我的页面上：不幸的是，似乎按钮只是被推到了一个全新的行。它工作正常通过显式设置窗体和控件的宽度，虽然可以这样做，但这并不完全是可取的。不过，感谢您的努力。