html - 引导下拉菜单不可见

问题描述

我正在尝试使用 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;

标签： htmlcssdrop-down-menusassbootstrap-4

html - 引导下拉菜单不可见

问题描述

解决方案

推荐阅读