Question

在升级到bootstrap 3时，我正在处理的网站的许多布局都必须进行修复。我已经设法解决了绝大多数问题，但页面的最后一个元素似乎不在我的掌握之中。

我遇到问题的一个例子可以在下面看到：

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

就桌面版而言，它运行正常。但是，如果您将页面水平缩小（以模拟它是“移动”版本），则按钮会以两种方式出错：

在平板电脑尺寸（768px-979px）下，它不再与其他按钮一致。我认为这是一个模糊的宽度问题，但我似乎无法确定它。
在移动设备尺寸（<786px）处，搜索栏及其对应的按钮不匹配。相反，按钮悬挂在右侧。

移动到bootstrap 3之前网站的样子如下：

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

我无法弄清楚平板电脑版本的问题（宽度？），移动版似乎无法通过浮动搜索栏中的任何对象来修复，所以总之我需要弄明白我可以在bootstrap 3上解决这两件事。

Answer 1

您已分配了错误的类，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文档：

默认情况下，Bootstrap中的输入，选择和textareas是100％宽。要使用内联表单，您必须在表单上设置宽度内部使用的控件。

因此，只需按照示例代码documentation page，添加必要的.form-control代码并为其指定宽度。

Answer 2

您可以使用列大小包裹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代码中。

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

2 个答案: