Ввод начальной загрузки с кнопкой в ​​панели навигации

Question

Я пытаюсь создать панель поиска в Bootstrap, но я хочу, чтобы она была прикреплена к панели навигации. Вот то, что у меня сейчас есть .Код для этого:

<form class="navbar-form navbar-left">
  <div class="form-group">
    <input type="text" class="form-control" id="search" placeholder="Search" />
  </div>
</form>

Это прекрасно работает.Но что, если я добавлю к нему кнопку:

<form class="navbar-form navbar-left">
  <div class="form-group">
    <input type="text" class="form-control" id="search" placeholder="Search" />
    <div class="input-group-btn">
      <button class="btn btn-default glyphicon glyphicon-search" type="submit"></button>
    </div>
  </div>
</form>

Это то, что происходит , вместо того, чтобы стоять на одной строке, все запутывается.Почему это происходит и как я могу это исправить?

Весь код для панели навигации:

<nav class="navbar navbar-inverse" id="topnav">
<div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#topnav">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
</div>

<div class="collapse navbar-collapse">
    <ul class="nav navbar-nav">

        <li><a href="/home">Home</a></li>
        <li><a href="/forum">Forum</a></li> 
        <li><a href="/about">About This Site</a></li>
        <li class="navbar-left"><form class="navbar-form navbar-left">
            <div class="form-group">
                <input type="text" class="form-control" id="search" placeholder="Search" />
                <div class="input-group-btn">
                    <button class="btn btn-default glyphicon glyphicon-search" type="submit"></button>
                </div>
            </div>
        </form></li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-cog"></span>&nbsp;User Settings</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-log-out"></span>&nbsp;Logout</a></li>
    </ul>
</div>
</nav>

Answer 1

Нет класса input-group-btn в Bootstrap 4. Используйте группу ввода , как объяснено здесь

      <div class="input-group">
            <input type="text" class="form-control" id="search" placeholder="Search" />
            <div class="input-group-append">
               <button class="btn btn-outline-secondary fa fa-search" type="submit"></button>
            </div>
      </div>

https://www.codeply.com/go/B1f1zG4RWQ

Кроме того, в Bootstrap 4 отсутствует btn-default или navbar-form. Обратитесь к документации , чтобы убедиться, что вы используете правильную разметку и классы.