google搜索栏twitter-bootstrap

问题描述：

我想用一个谷歌式的搜索栏创建一个简单的索引页面，但是我很努力让Twitter的Bootstrap看起来很好。

I'm looking to create a plain index page with a Google-style centred search bar, however I'm struggling to get things looking good with Twitter Bootstrap.

搜索栏必须在搜索字段的末尾（右侧）添加一个搜索图标按钮。我已经使用了typeahead，因为我打算编写一个下拉搜索建议系统。

The search bar must have a search icon button appended at the end (right side) of the search field. I have used typeahead as I am planning to code a dropdown search-suggestion system.

<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不得不放在页面顶部。

It must also be larger (taller) than the standard textbox, a feature not yet available in the stable release of Twitter Bootstrap, hence the CSS I have had to put at the top of the page.

<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时出现一个空白）是使用负边距。不是我感到自豪的，它看起来很乱。

The only way I could see of getting the search button closer to the searchbar (a gap appears when you use btn-large) was to use a negative margin. Not something I am proud of, it looks very messy.

我会感谢一些指导。先感谢。

I'd appreciate some guidance on this. Thanks in advance.

答

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

Fiddle -

Fiddle-

更新了小提琴

google搜索栏twitter-bootstrap

相关推荐