将移动搜索栏与引导程序 3 对齐答案

【问题标题】：Aligning search bar for mobile with bootstrap 3将移动搜索栏与引导程序 3 对齐
【发布时间】：2016-07-02 16:59:33
【问题描述】：

在升级到 bootstrap 3 时，我正在处理的网站的很多布局都必须修复。我已经设法修复了大部分问题，但是页面的最后一个元素似乎超出了我的掌握。

下面是我遇到的问题的一个示例：

http://1ro.co/shopfine/template.html

就桌面版本而言，它运行良好。但是，如果您水平缩小页面（以模拟它是“移动”版本），按钮会出现两种错误：

在平板尺寸 (768px-979px) 时，它不再与其他按钮对齐。我假设这是一个模糊的宽度问题，但我似乎无法确定它。
在移动设备尺寸 (

在迁移到 bootstrap 3 之前网站的外观示例如下：

http://1ro.co/shopfine/account.html

我无法弄清楚平板电脑版本的问题（宽度？），而移动版本似乎无法通过浮动搜索栏中的任何对象来解决，所以简而言之，我需要弄清楚是什么我可以在引导程序 3 上修复这两件事。

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

你可以用列大小来包装你的 input-group 类，例如

<div class="col-sm-12">
  <div class="input-group">
    <input type="text" placeholder="Search..." id="appendedInputButton" class="form-control">
      <span class="input-group-btn">
        <button type="submit" class="btn btn-primary">
          <i class="icon-search"></i>
        </button>
      </span>
  </div>
</div>

不要忘记将form-control 类添加到您的input 标记中。

【讨论】：

我相信我最后一次尝试这个时，它没有工作。我将发布两个答案的尝试
然而，这仍然会导致按钮未附加的问题。 1ro.co/shopfine/template_2.html
这是根据引导文档，在通过 firebug 进行动态更改时实际上对我有用，但显然与您的环境不同。
@Rogue 您在 template_2.html 上的代码有错误。检查输入上的 class="form-control"，它之间有空格并且没有被应用。
我认为你看错了表格。搜索栏上没有form-control，这在新闻通讯注册的下方。编辑：奇怪，它不在我的 IDE 中，但在我的页面上：pastie.org/pastes/8394115/text

【解决方案2】：

你分配了错误的类，应该是col-sm-2而不是col-md-2到div#searchBar
去掉div.input-fields 并将.form-inline 类添加到<form> 标记，并将.form-group 添加到表单元素中，如下所示：

<form method="get" action="page" class="siteSearch form-inline"> <input type="text" id="appendedInputButton" placeholder="Search..." class="form-group"> <span class="input-group-btn form-group"> <button class="btn btn-primary" type="submit"> <i class="icon-search"></i> </button> </span> </form>

PS 对格式表示抱歉，有些地方不对劲

编辑

来自引导文档：

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

所以只需按照documentation page 的示例代码，添加必要的.form-control 标签并为其分配宽度。

【讨论】：

不幸的是，按钮似乎只是被推到了一个全新的行。 1ro.co/shopfine/template_1.html
它通过显式设置表单和控件的宽度来工作，虽然可以做到这一点并不完全理想。不过感谢您的努力。