1

我正在寻找一个带有谷歌风格的居中搜索栏的普通索引页面，但是我正在努力让 Twitter Bootstrap 看起来不错。

搜索栏必须在搜索字段的末尾（右侧）附加一个搜索图标按钮。当我计划编写一个下拉搜索建议系统时，我使用了预输入。

<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 时会出现间隙）是使用负边距。不是我引以为豪的东西，它看起来很乱。

我很感激这方面的一些指导。提前致谢。

4

2 回答 2

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>

小提琴-

更新的小提琴

于 2013-03-20T15:49:51.263 回答
1

您可以尝试扩展表单控件

<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，但它们将作为一个单元保留在移动视图中。如果您真的想要自定义视图，那么无论如何您都会降低边距。

于 2013-03-20T15:50:48.540 回答