Question

我正在尝试在按钮组之间使用下拉菜单，而我正在使用bootstrap 4，但如果您运行代码段，则可以看到下拉按钮旁边的下拉项。

我不知道它出错的地方我从Quack中添加了外部资源。

<head>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
  <!-- Latest compiled and minified Bootstrap CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">


</head>

<body>
  <div class="btn-group btn-group-vertical" role="group">
    <button class="btn btn-outline-primary btn-large disabled mr-3">Samba|Tax Consultant</button>
    <button class="btn btn-outline-primary btn-large">Income Tax</button>
    <button class="btn btn-outline-primary btn-large">GST Returns</button>
    <button class="btn btn-outline-primary btn-large">NRI Services</button>
    <div class="btn-group" role="group">
      <button class="btn btn-outline-primary btn-large dropdown-toggle" type="button" id="our-services" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Our Services</button>
      <div class="dopdown-menu" aria-labelledby="our-services">
        <a class="dropdown-item" href="#">Acconting & Auditing</a>
        <a class="dropdown-item" href="#">Business Establishment</a>
        <a class="dropdown-item" href="#">PAN & TAN Services</a>
        <a class="dropdown-item" href="#">Banking Services</a>
        <a class="dropdown-item" href="#">NRI Services</a>

      </div>
    </div>
    <button class="btn btn-outline-primary btn-large">Contact Form</button>
  </div>
   
  </body>

Answer 1

＆＃13;

<head>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
  <!-- Latest compiled and minified Bootstrap CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

</head>

<body>
  <div class="btn-group btn-group-vertical" role="group">
    <button class="btn btn-outline-primary btn-large disabled mr-3">Samba|Tax Consultant</button>
    <button class="btn btn-outline-primary btn-large">Income Tax</button>
    <button class="btn btn-outline-primary btn-large">GST Returns</button>
    <button class="btn btn-outline-primary btn-large">NRI Services</button>
    <div class="btn-group" role="group">
      <button class="btn btn-outline-primary btn-large dropdown-toggle" type="button" id="our-services" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Our Services</button>
      <div class="dropdown-menu" aria-labelledby="our-services">
        <a class="dropdown-item" href="#">Acconting & Auditing</a>
        <a class="dropdown-item" href="#">Business Establishment</a>
        <a class="dropdown-item" href="#">PAN & TAN Services</a>
        <a class="dropdown-item" href="#">Banking Services</a>
        <a class="dropdown-item" href="#">NRI Services</a>

      </div>
    </div>
    <button class="btn btn-outline-primary btn-large">Contact Form</button>
  </div>
</body>
</html>

＆＃13;

你在这里打错了

<div class="dropdown-menu" aria-labelledby="our-services">

无法使用bootstrap进行下拉列表

1 个答案: