Question

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

Answer 1

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

https://jsfiddle.net/r1k2e4xc/

Answer 2

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

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

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

Bootstrap下拉菜单不可见

2 个答案: