Question

我有一个Bootstrap 3.3.7的网站

我想创建一个下拉按钮，但它不会打开。

我的代码出了什么问题？谢谢

<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <div class="fa-4x">
      <span class="fa-layers fa-fw">
        <i class="fas fa-circle"></i>
        <i class="fa-inverse fas fa-plus" data-fa-transform="shrink-6"></i>
      </span>
    </div>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Answer 1

添加此链接

<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
<script src="bootstrap-3.3.7-dist/js/jquery-3.2.0.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

HTML：

<div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <div class="fa-4x">
      <span class="fa-layers fa-fw">
        <i class="fas fa-circle"></i>
        <i class="fa-inverse fas fa-plus" data-fa-transform="shrink-6"></i>
      </span>
        </div>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
    </ul>
</div>

Answer 2

您缺少 popper.js 。下拉列表需要依赖项。您可以使用包含此库的 bootstrap.bundled.min.js 。

Answer 3

请将jQuery脚本添加到您的网站。

Add this script:   
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

小提琴参考：https://jsfiddle.net/npbf0pxz/5/

Answer 4

如果您使用用于此

的链接，问题将解决

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <div class="fa-4x">
      <span class="fa-layers fa-fw">
        <i class="fas fa-circle"></i>
        <i class="fa-inverse fas fa-plus" data-fa-transform="shrink-6"></i>
      </span>
        </div>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
    </ul>
</div>

Answer 5

<div class="view-empty">
<div class="fa-4x dropdown">
    <a class="dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
        <span class="fa-layers fa-fw">
            <svg class="svg-inline--fa fa-circle fa-w-16" aria-hidden="true" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z"></path></svg><!-- <i class="fas fa-circle"></i> -->
          <svg class="svg-inline--fa fa-plus fa-w-14 fa-inverse" data-fa-transform="shrink-6" aria-hidden="true" data-prefix="fas" data-icon="plus" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg="" style="transform-origin: 0.4375em 0.5em;"><g transform="translate(224 256)"><g transform="translate(0, 0)  scale(0.625, 0.625)  rotate(0 0 0)"><path fill="currentColor" d="M448 294.2v-76.4c0-13.3-10.7-24-24-24H286.2V56c0-13.3-10.7-24-24-24h-76.4c-13.3 0-24 10.7-24 24v137.8H24c-13.3 0-24 10.7-24 24v76.4c0 13.3 10.7 24 24 24h137.8V456c0 13.3 10.7 24 24 24h76.4c13.3 0 24-10.7 24-24V318.2H424c13.3 0 24-10.7 24-24z" transform="translate(-224 -256)"></path></g></g></svg><!-- <i class="fa-inverse fas fa-plus" data-fa-transform="shrink-6"></i> -->
        </span>
    </a>
    <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
    </ul>
</div>
</div>

试试这段代码。

Answer 6

您在页面中的下拉列表工作正常。我在那里找不到任何问题。你只有一个选项“创建我的个人资料”吗？

我的下拉按钮无法打开

6 个答案: