Question

所以我有下面的HTML。如果单击搜索（右上角），您会在左上角看到一个下拉框。我想“连接”这些，以便下拉框正确位于搜索框下方，整个事情就像连接到下拉列表的按钮一样。

我不是一个真正的网络人，我真的“不知道”Bootstrap（这是我第一次使用它）所以请记住这一点！

<!doctype html>
<html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
    <link rel="stylesheet" href="/static/css/style.css">
    <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"></script>
    <script src="https://use.fontawesome.com/6e0448e881.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    </head>

    <body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
            </li>
        </ul>


        <form class="form-inline my-2 my-lg-0" method="get">
            <input name="q" id="qbox" data-toggle="dropdown" type="search" class="form-control" placeholder="Search" autofocus="autofocus" autocomplete="off"/>
            <div id="search_results" class="dropdown-menu" role="menu">
            <div>a</div>
            <div>b</div>
            <div>c</div>
            </div>
        </form>


        </div>
    </nav>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
    </body>
</html>

Answer 1

您必须覆盖应用于下拉菜单的类，该类称为.dropdown-menu。

在你的css中：

.dropdown-menu{
    left: initial;
 }

根据您的css结构的外观，您可以在初始声明后面使用!important来调用此规则。

“连接”下拉框和引导程序中的输入表单

1 个答案: