![](/img/trans.png)
[英]How to create a search bar with a search button inside it using bootstrap?
[英]How to append a search button inside a search input field using bootstrap
我正在使用一个模板,名称是Wrapbootstrap中使用Twitter Bootstrap的Treble One Page Rsponsive Theme。 我正在实现模板,遇到了这个小错误,令我发疯。
有一个搜索栏,由<input>
标签和<button>
标签组成。 以前还不错,直到我在<form>
内创建它为止,搜索栏才开始变得怪异。 <input>
字段居中,但<button>
附加到字段外部,使整个内容不居中。
这是要清楚的图像:
这是我的代码:
<div class="row">
<div class="span8 offset2">
<div class="input-append">
<form method="get">
<input class="span5" id="appendedInputButton" type="text" placeholder="Search By Name" name="searchTerm" value="Search">
<button class="btn btn-primary sicon-search sicon-white" type="submit"><i>Search</i></button>
</form>
</div>
</div>
</div>
我已经用谷歌搜索了这个模板 。
此代码按预期可在原始模板上运行:
<div class="row">
<div class="span8 offset2">
<form class="input-append" method="get">
<input class="span5" id="appendedInputButton" type="text" placeholder="Search By Name" name="searchTerm" value="Search" />
<button class="btn btn-primary sicon-search sicon-white" type="submit"><i>Search</i></button>
</form>
</div>
</div>
主要思想是将“ input-append” div转换为表单,而不是在其中添加新的form元素。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.