为什么箭头不显示？

Question

我正在尝试使用引导程序，但似乎无法创建一个简单的下拉按钮。

代码如下：

  <div class="btn-group">
    <button type="button" class="btn btn-primary">Choose phobia</button>
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
      <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu">
      {% for phobia in phobia_list %}
      <a class="dropdown-item" href="{% url 'android:phobia_detail' phobia.id %}">{{phobia.name}}</a> {% endfor %}
    </div>
  </div>

以及我如何加载引导程序

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

这是结果

Answer 1

将两个按钮更改为如下所示：

<button type="button" class="btn btn-primary dropdown-toggle" 
 data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Choose phobia <span class="caret"></span>
</button>

Answer 2

供将来参考 -> 工作解决方案：

  <div class="btn-group">
    <button type="button" class="btn btn-primary">Choose phobia</button>
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
      <span class="sr-only">Toggle Dropdown</span>
      <span class="caret"/>
    </button>
    <ul class="dropdown-menu">
      {% for phobia in phobia_list %}
      <li><a class="dropdown-item" href="{% url 'android:phobia_detail' phobia.id %}">{{phobia.name}}</a></li>
      {% endfor %}
    </ul>
  </div>