twitter-bootstrap 带按钮的搜索框（Bootstrap 3）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/40303303/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Search box with button (Bootstrap 3)
提问by Kendall H.
I want to create a search box with a button on it's side, like the this:
我想创建一个带有按钮的搜索框，如下所示：
But just on the right side of the page. So I put pull-rightand this is how my code like:
但就在页面的右侧。所以我把右拉，这就是我的代码的样子：
<form action="/hms/accommodations" method="GET">
<div class="input-group pull-right">
<input type="text" class="form-control" placeholder="Search" id="txtSearch"/>
<div class="input-group-btn pull-right">
<button class="btn btn-primary" type="submit">
<span class="glyphicon glyphicon-search"></span>
</button>
</div>
</div>
</form>
and when I tried to run it, this is how it looks like:
当我尝试运行它时，它是这样的：
Why is does the alignment like that? I hope someone can help me. Thank you.
为什么对齐会这样？我希望有一个人可以帮助我。谢谢你。
回答by Anil Kumar Ram
Remove pull-rightclass from <div class="input-group-btn pull-right">
拆下右拉式的类<div class="input-group-btn pull-right">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<form action="/hms/accommodations" method="GET">
<div class="row">
<div class="col-xs-6 col-md-4">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" id="txtSearch"/>
<div class="input-group-btn">
<button class="btn btn-primary" type="submit">
<span class="glyphicon glyphicon-search"></span>
</button>
</div>
</div>
</div>
</div>
</form>回答by surender
Try to add ( float:left ) to form-control. i hope it will works.
尝试将 ( float:left ) 添加到表单控件。我希望它会起作用。
回答by katy
<div class="col-md-5">
<div class="search-box">
<input type="search" class="form-control ds-input" id="search-input"
placeholder="Search..." autocomplete="off" spellcheck="false" role="combobox"
aria-autocomplete="list" aria-expanded="false"
aria-owns="algolia-autocomplete-listbox-0"
style="position: relative; vertical-align: middle;" dir="auto">
</div>
</div>
