Question

我正在尝试在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，它变得一团糟，而不是排成一行。为什么会发生这种情况，我该如何解决？

导航栏的所有代码：

<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

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确保使用正确的标记和类。

带导航栏中按钮的引导输入

1 个答案: