代码之家 › 专栏 › 技术社区 › Jack Finan

引导下拉菜单不可见

bootstrap-4 sass drop-down-menu css html

Jack Finan · 技术社区 · 6 年前

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

Sass公司

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;

2 回复 | 直到 6 年前

Carol Skelly 6 年前

去除 overflow:hidden 从导航栏。。。

https://jsfiddle.net/r1k2e4xc/

Trilok Kumar 6 年前

从代码中删除以下css。这就是您的下拉列表隐藏的原因。

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

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