使用引导程序3将移动设备的搜索栏对齐 [英] Aligning search bar for mobile with bootstrap 3

问题描述

在升级到bootstrap 3，我正在工作的网站的很多布局必须修复。我已经设法解决了绝大多数，但是最后一个元素的页面似乎是我的掌握。

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

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

至于桌面版本，它工作正常。但是，如果您水平缩小页面（以模拟它是移动版本），按钮会以两种方式出错：

1. 平板电脑大小（768像素 - 979像素），它不再与其他按钮一致。


2. 在移动设备尺寸（<786像素）下，搜索栏及其相应的按钮不匹配，因此我们假设这是一个模糊的宽度问题，的值。




在移动到bootstrap 3之前，网站看起来像一个例子也是如下：



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





我无法弄清平板电脑版本的问题（宽度？），而移动版本似乎无法通过浮动的搜索栏中的对象，所以总之，我需要弄清楚在什么样的方式我可以解决这两个东西在bootstrap 3。

解决方案

您可以将 input-group 类包装为一个列大小，例如

 < div class =col-sm-12> 
< div class =input-group> 
< input type =textplaceholder =Search ...id =uploadedInputButtonclass =form-control> 
< span class =input-group-btn> 
< button type =submitclass =btn btn-primary> 
< i class =icon-search>< / i> 
< / button> 
< / span> 
< / div> 
< / div> 
  

不要忘记添加 form-control 类转换为输入标记。




In upgrading to bootstrap 3, a lot of the layout for a site I am working on had to be repaired. I've managed to fix a great majority of it, however a final element of the page seems to be out of my grasp.

An example of what I am having issue with can be viewed below:

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

As far as desktop version goes, it works fine. However if you shrink the page horizontally (to simulate it being the "mobile" version), the button goes wrong in two ways:

1. At tablet size (768px-979px), it no longer is in line with the other buttons. I'm assuming this is an obscure width issue, but I cannot seem to pinpoint it.
2. At the mobile size (<786px) the search bar and its corresponding button do not match up. Rather the button hangs to the right.

An example of what the site looked like before the move to bootstrap 3 is also below:

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

I cannot figure out the issue (width?) on the tablet version, and the mobile version can't seemed to be fixed by floating any of the objects within the search bar, so in short I need to figure out in what way I can fix those two things on bootstrap 3.

解决方案

You can wrap your input-group class with a column size e.g.

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

Don't forget to add form-control class to your input tag.

这篇关于使用引导程序3将移动设备的搜索栏对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！