我正在尝试创建一个表单，该表单重点显示用户先前搜索的下拉列表。但是，我遇到了标记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" …