Question

我正在使用引导程序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

它的作用是：

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

Answer 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

面板标题中的bootstrap 3输入组

1 个答案: