Twitter Bootstrap: Input-append Search Box
Question
I am attempting to use Twitter Bootstrap input-append search and it's not lining up the text box and the search button. I've grabbed Twitters latest and greatest 2.1 bootstrap from August 20th (grabbed today). so things like "white-space: nowrap;" are already set.
Any ideas?
Code:
<li class="dropdown">
<a class="dropdown-toggle" id="Search" role="button" data-toggle="dropdown" href="#">Search<b class="caret"></b>
</a>
<ul class="dropdown-menu" role="menu" ara-labelledby="Search">
<form class="form-search">
<div class="input-append">
<input type="text" class="search-query">
<button type="submit" class="btn"><i class="icon-search"></i></button>
</div>
</form>
</ul>
</li>
Sample Image:
2 answers
solution1
3 ACCPTED 2012-08-30 00:34:57
You are missing a proper doctype declaration. You need <!DOCTYPE html> over <html> , that's what causing the abnormality.
Tip
I also had a look at http://collecthw.com/ci , I would strongly suggest you use http://validator.w3.org/ , there are a lot of errors in the markup. Cases of <div><form></div></form> which obviously ain't good. I could also spot multiple <body> tags along with multiple versions of jquery.
I also think the markup is totally different from what bootstrap offers. Modal markup in a dropdown don't seem to be a proper thing to do. If you follow the markup provided by bootstrap , and extend upon that if you wish, everything will be so much easier for you :)
solution2
1 2012-08-29 19:32:41
将此添加到按钮css中： margin-top: 0;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.