我正在使用bootstrap 3,并且有一个面板。在面板标题中,我想放置一个带有输入组的表单。在下面的HTML中,在输入组中,我有一个执行搜索的表单。在那种形式下,我有一个带有文本框和按钮/提交的输入组。显示输入组时,它将搜索按钮放在文本框下面而不是旁边的行上。如何使所有内容在线显示?

<div class="panel panel-default" style="margin:50px;">
    <div class="panel-heading clearfix">
      &nbsp;&nbsp;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

这是它的作用:
html - 面板标题中的bootstrap 3输入组-LMLPHP

这就是我想要的但不知道如何作为一种形式:
html - 面板标题中的bootstrap 3输入组-LMLPHP

最佳答案

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

08-19 09:05