bootstrap 下拉链接没有样式

Question

我刚刚从 Bootstrap 网站复制了代码：https://getbootstrap.com/docs/4.4/components/button-group/#nesting

但是我的下拉菜单链接不像这样跨越菜单 - 我是不是漏掉了什么？

我尝试应用此代码但无济于事Bootstrap Dropdown Not Styling Properly

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

  <div class="btn-group" role="group">
    <button id="btnGroupDrop1" type="button" class="btn btn-grey dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      OTHER <span class='caret'></span>
    </button>
    <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
      <a class="dropdown-item" href="#">Dropdown link</a>
      <a class="dropdown-item" href="#">Dropdown link</a>
  </div>
</div>

Answer 1

使用这些代码来解决您的问题

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>demo</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
 </head>
 <body>
  <div class="dropdown">
   <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Links
   <span class="caret"></span></button>
   <ul class="dropdown-menu">
    <li><a href="#">Link1</a></li>
    <li><a href="#">Link2</a></li>
    <li><a href="#">Link3</a></li>
   </ul>
  </div>
 </body>
</html>

希望您的问题得到解决，谢谢。

bootstrap 下拉链接没有样式

bootstrap dropdown links not styling

css

twitter-bootstrap-3