Question

在我的Bootstrap@4.1.3中，我试图通过添加添加的“ show”类来显示具有打开状态的下拉列表。但不起作用。有人帮我吗？

这是我的html：

<div class="row">
    <div class="col-xs-12">
        <div class="btn-group show" >
            <button class="btn btn-primary dropdown-toggle">Manage Recipe <span class="caret"></span></button>
            <ul class="dropdown-menu">
                <li><a href="#">Shopping List</a></li>
                <li><a href="#">Edit Recipe</a></li>
                <li><a href="#">Delete Recipe</a></li>
            </ul>
        </div>
    </div>
</div>

Live Demo

Answer 1

尝试使用所有链接，它将起作用...

您还错过了此按钮中的data-toggle="dropdown"

<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      About Us
    </button>

<html>
<head> 
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/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.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">                                         
  <div class="dropdown show">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      About Us
    </button>
    <div class="dropdown-menu">
     <a class="dropdown-item" href="#">Our Story</a>
     <a class="dropdown-item" href="#">Our Team</a>
     <a class="dropdown-item" href="#">Contact Us</a>
    </div>
  </div>
</div>
</body>
</html>

我更新了您的小提琴check here

无法获得下拉菜单的“打开”状态

1 个答案: