自定义引导表单输入与下拉建议

Question

我正在尝试创建一个焦点上会显示用户以前搜索下拉列表的表单。但是，我正在遇到标记html / css的问题，这样看起来像我想要的那样。

我希望下拉菜单直接显示在输入框下方，即与输入框对齐，输入框和建议之间的间距为零。

您可以在此JSFiddle尝试中看到我遇到的问题，其中建议包含在导航栏之后。

   

 body {
      margin: 10px;
    }

    .navbar-container {
      display: flex;
      align-items: center;
    }

    .d-flex {
      display: flex;
      align-items: center;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>


<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse bg-inverse">
  <div class="container navbar-container">
    <a class="navbar-brand" href="#">
      <img src="https://v4-alpha.getbootstrap.com/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="">
    </a>
    <form class="form-inline d-flex">
      <input class="form-control form-control-sm" type="text" placeholder="Search" id="menu1" data-toggle="dropdown">
      <button class="btn btn-outline-success btn-sm" type="submit">Go</button>
      <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">HTML</a></li>
        <div class="dropdown-divider"></div>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">CSS</a></li>
        <div class="dropdown-divider"></div>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">JavaScript</a></li>
      </ul>
    </form>
  </div>

</nav>

Answer 1

只要确保表单有.dropdown类，因为它是.dropdown-menu的父级。

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

<nav class="navbar navbar-inverse bg-inverse">
    <div class="container navbar-container">
        <a class="navbar-brand" href="#">
            <img src="https://v4-alpha.getbootstrap.com/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="">
        </a>
        <form class="form-inline d-flex dropdown">
            <input class="form-control form-control-sm" type="text" placeholder="Search" id="menu1" data-toggle="dropdown">
            <button class="btn btn-outline-success btn-sm" type="submit">Go</button>
            <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">HTML</a></li>
                <div class="dropdown-divider"></div>
                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">CSS</a></li>
                <div class="dropdown-divider"></div>
                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">JavaScript</a></li>
            </ul>
        </form>
    </div>
</nav>

此外，如果升级到4.0.0，则不需要额外的flexbox类。