谷歌搜索栏twitter-bootstrap

Question

我希望创建一个简单的索引页与谷歌风格的中心搜索栏，但我正在努力让东西看起来很好与Twitter Bootstrap。

搜索栏必须在搜索字段的末尾(右侧)附加一个搜索图标按钮。我已经使用了typeahead，因为我计划编写一个下拉搜索建议系统。

<div class="hero-unit">
<div class="input-append">
  <input type="text" data-provider="typeahead" class="input-large"
  placeholder="What do you want to know?" autocomplete="off">
  <button type="submit" class="btn-large btn-success">
    <i class="icon-search"></i> 
  </button>
</div>

​

它还必须比标准文本框大(高)，这是Twitter Bootstrap的稳定版本中尚未提供的功能，因此我不得不将CSS放在页面的顶部。

<style>
 input[class=input-large] {
    width: 540px;
    height: 24px;
    margin-bottom: 10px;
    margin-right: -7px;
    line-height: 30px;
    padding: 11px 19px;
    font-size: 17.5px;
    -webkit-border-radius: 6px;
       -moz-border-radius: 6px;
            border-radius: 6px;
  }

​

我能看到的使搜索按钮更接近搜索栏的唯一方法(当你使用btn-large时会出现一个间隙)是使用负边距。这不是我引以为傲的东西，它看起来很乱。

如果能给我一些指导我会很感激。提前谢谢。

Answer 1

<div class='container'>
    <div class='row'>
        <form>
        <div class='span3 input-append' style="margin-top:30%; margin-left:30%">
            <input class="span2" style="height:26px;width:400px;" id="main_search" type="text" >
            <input class="btn btn-large btn-primary"  type="button" value="search">
        </div>

        </form>
    </div>
</div>

小提琴-

Updated fiddle

Answer 2

你可以试试extended form controls

<div class="input-append">
    <span class="add-on"><input id="search-button" value="Search"></span>
    <!-- stick a search icon in there instead -->
    <input class="span2" id="search">
</div>

如果你这样做(填充，轮廓)，你将不得不调整按钮的CSS，但它们在移动视图中将保持为一个单元。如果你真的想要一个自定义视图，无论如何你都会降低页边距。