начальная группа начальной загрузки 3 в заголовке панели - PullRequest
Новая
       16

начальная группа начальной загрузки 3 в заголовке панели

0 голосов
/ 04 июля 2019

Я использую загрузчик 3, и у меня есть панель.В заголовке панели я хочу разместить форму с input-group.В приведенном ниже 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

Вот что он делает: enter image description here

Это то, что я хочу, но не знаю как в форме: enter image description here

1 Ответ

0 голосов
/ 04 июля 2019

Добавьте класс 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

...