导航栏中带有按钮的引导输入答案

【问题标题】：Bootstrap input with button in navbar导航栏中带有按钮的引导输入
【发布时间】：2018-10-28 21:22:48
【问题描述】：

我正在尝试在 Bootstrap 中创建一个搜索栏，但我希望它附加到导航栏。 Here is what I currently have。代码：

<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>

This is what happens，它变得一团糟，而不是在 1 行。为什么会发生这种情况，我该如何解决？

导航栏的所有代码：

<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>

【问题讨论】：

这看起来像 Bootstrap 3 导航栏，而不是 Bootstrap 4。

标签： html bootstrap-4

【解决方案1】：

Bootstrap 4 中没有input-group-btn 类。使用input-group 作为explained here

      <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。Refer to the docs 以确保您使用正确的标记和类。

【讨论】：