我正在使用bootstrap 3,并且有一个面板。在面板标题中,我想放置一个带有输入组的表单。在下面的HTML中,在输入组中,我有一个执行搜索的表单。在那种形式下,我有一个带有文本框和按钮/提交的输入组。显示输入组时,它将搜索按钮放在文本框下面而不是旁边的行上。如何使所有内容在线显示?
<div class="panel panel-default" style="margin:50px;">
<div class="panel-heading clearfix">
List
<div class="btn-toolbar pull-right">
<div class="input-group" style="width:140px;">
<form method="POST" action="http://localhost/index.php/search" accept-charset="UTF-8">
<input name="_token" type="hidden" value="R3GjM2xVYzboRQzaTKLYQSI2rpjUWYqQoVkNLsBp">
<input id="stockno" class="form-control" maxlength="12" autofocus="autofocus" type="text" value="">
<span class="input-group-btn">
<button class="btn btn-success" type="submit"><span class="glyphicon glyphicon-search"></span></button>
</span>
</form>
</div>
<div class="btn-group">
<button type="button" data-toggle="dropdown" class="btn btn-primary dropdown-toggle"><span class="glyphicon glyphicon-menu-hamburger"></span></button>
<ul class="dropdown-menu pull-right" role="menu">
<li><b>Sort</b></li>
<li>Col A</li>
<li>Col B</li>
</ul>
</div>
</div>
</div>
<table class="table table-striped table-condensed">
<thead>
<tr>
<td>Col A</td>
<td>Col B</td>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">No results found.</td>
</tr>
</tbody>
</table>
</div>
样例代码:
https://www.codeply.com/go/8s0jfWbmB4
这是它的作用:
这就是我想要的但不知道如何作为一种形式:
最佳答案
将form-inline
类添加到form元素中,如下所示:
<form class="form-inline" method="POST" action="http://localhost/index.php/search" accept-charset="UTF-8">
<input name="_token" type="hidden" value="R3GjM2xVYzboRQzaTKLYQSI2rpjUWYqQoVkNLsBp">
<input id="stockno" class="form-control" maxlength="12" autofocus="autofocus" type="text" value="">
<span class="input-group-btn">
<button class="btn btn-success" type="submit"><span class="glyphicon glyphicon-search"></span></button>
</span>
</form>
无论如何,这就是Bootstrap网站上的文档所说的:
https://getbootstrap.com/docs/4.0/components/forms/#inline-forms