面板标题中的引导程序 3 输入组答案

【问题标题】：bootstrap 3 input-group in panel heading面板标题中的引导程序 3 输入组
【发布时间】：2019-07-04 19:24:57
【问题描述】：

我正在使用 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

这就是它的作用：

这是我想要的，但不知道如何作为一种形式：

【问题讨论】：

'这是解决方案' 我已经测试过了：<div class="input-group"> <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>

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

将form-inline 类添加到表单元素中，如下所示：

<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

【讨论】：

感谢您的回复，但不幸的是这不起作用。