引导下拉菜单不可见答案

【问题标题】：Bootstrap dropdown menu not visible引导下拉菜单不可见
【发布时间】：2018-10-22 08:23:36
【问题描述】：

我正在尝试使用 Bootstrap 4 制作带有下拉菜单的导航栏。当我单击下拉链接时，没有任何反应。当我单击 chrome 开发工具中的下拉菜单时，它会突出显示它应该在的区域，因此它已经扩展但不可见。我密切关注 w3schools 上的示例，所以我认为我的 css 破坏了它。有人能发现问题吗？

我的代码在下面，我还做了一个jsfiddle 来重现错误。您可以看到菜单的顶部，但它不会显示在 div 的底部之外。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>my site</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

    <link rel="stylesheet" href="css/stylesheet.css">
</head>

<body>
<div class="container" id="main-container">
    <div class="header row">
        <h1 class="col-md-4">
            <a href="#" title="Home page">
                <img src="images/logo.png" />
            </a>
        </h1>
        <div class="col-md-8">
            <nav class="navbar navbar-expand-sm">
                <ul class="navbar-nav">
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">Link 1</a>
                        <div class="dropdown-menu">
                            <a class="dropdown-item" href="#">Link 1a</a>
                            <a class="dropdown-item" href="#">Link 1b</a>
                            <a class="dropdown-item" href="#">Link 1c</a>
                        </div>
                    </li>
                    <li class="nav-item"><a class="nav-link" href="#">Link 2</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Link 3</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Link 4</a></li>
                </ul>
            </nav>
        </div>
    </div>
</div>
</body>

</html>

萨斯

body
    background-color: #ddd;

    #main-container
        background-color: #fff;
        margin-top: 10px;
        border-radius: 20px 20px 0 0;

.header
    position: relative;
    margin: 0 10px 20px 10px;
    border-bottom: 3px solid #444;

    h1
        margin: 0;

.navbar
    overflow: hidden;
    background-color: #333;
    font-family: Arial;
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 0;
    background-color: #fff;

.navbar-expand-sm
    .navbar-nav
        .nav-link
            color: #444;
            text-align: centre;
            text-decotation: none;
            font-size: 17px;
            padding: 13px 16px 9px 16px;
            border-radius: 16px 16px 0 0;

            &:hover
                background-color: #444;
                color: #e5e5e5;

【问题讨论】：

标签： html css drop-down-menu sass bootstrap-4

【解决方案1】：

从导航栏中删除 overflow:hidden...

https://jsfiddle.net/r1k2e4xc/

【讨论】：

【解决方案2】：

从代码中删除以下 css。这就是您的下拉菜单显示为隐藏的原因。

@media (min-width: 576px)
.navbar-expand-sm .navbar-nav .dropdown-menu {
  /* position: absolute; */
}

我在这里评论了导致问题的 css。

【讨论】：

您当前的代码在小屏幕尺寸下运行良好。您的下拉菜单实际上出现在那里。