Php 谷歌搜索栏推特引导

我想用以谷歌风格为中心的搜索栏创建一个简单的索引页面，但是我很难用推特引导让事情看起来很好

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

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

输入[类=输入大]{
宽度：540px；
高度：24px；
边缘底部：10px；
右边距：-7px；
线高：30px；
填充：11px 19px；
字号：17.5px；
-webkit边界半径：6px；
-moz边界半径：6px；
边界半径：6px；
}

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

我希望你能给我一些指导。提前感谢。

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

拨弄-

你可以试试

---

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

试着使用

input-append

和

add-on

；他们真的把按钮和条合并成一个，而不是用HTML5中的

/>

作为自动关闭的元素；它无效，并创建了一个void元素。它在HTML4中也是无效的：）你可以像引导文档那样使用

。这很有效，看起来很完美，但是我需要增加文本框的高度和按钮的大小，这就是破坏一切的原因。使用标准尺寸的框/按钮进行附加很容易，它是开箱即用的。不过我很感激你的努力。@Manoz太完美了！那个样式标签使东西完全对齐。@Manzon还有一件事，奖品是你的：我如何根据屏幕分辨率而不是固定宽度来设置文本字段的居中对齐和调整大小？我相信这很容易，我只是太生疏了！同样，这也无助于解决主要问题——btn大型和更大/更高的文本框。我一定错过了文档中的扩展控制位，所以谢谢你的参考。

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