0

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

可以在下面查看我遇到的问题的示例：

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

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

  1. 在平板电脑尺寸 (768px-979px) 下，它不再与其他按钮对齐。我假设这是一个模糊的宽度问题，但我似乎无法确定它。
  2. 在移动设备尺寸 (<786px) 下，搜索栏与其对应的按钮不匹配。而是按钮挂在右侧。

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

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

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

4

2 回答 2

1

  1. 您分配了错误的班级，应该col-sm-2不是col-md-2div#searchBar

  2. 丢失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% 宽。要使用内联表单，您必须在其中使用的表单控件上设置宽度。

因此，只需按照文档页面的示例代码，添加必要的.form-control标签并为其分配宽度。

于 2013-10-11T04:08:22.557 回答
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标签中。

于 2013-10-11T04:11:00.337 回答