Bootstrap轮播指示器和控件不使用树枝

Question

我试图用树枝创建一个Bootstrap轮播。以下代码正常工作并正确加载数据和图像，但是当单击指示器或箭头控件时，没有任何反应。轮播工作（它会改变图像），但不能控制。

最奇怪的是，在将屏幕尺寸调整为移动尺寸（xs或sm）时效果很好。但是当尺寸达到md时，控件就会停止工作......

<div id="mycarousel" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner" role="listbox">
    {% for item in gallery %}
    {% if loop.first %}
    <div class="item active"> <img src="/images/{{ item.name }}" class="img-responsive" >
      <div class="carousel-caption">
        <h2>{{ item.Caption }}</h2>
      </div>
    </div>
    {% else %}
    <div class="item"> <img src="/images/{{ item.name }}" class="img-responsive" >
      <div class="carousel-caption">
        <h2>{{ item.Caption }}</h2>
      </div>
    </div>
    {% endif %}
    {% endfor %}
    <a class="left carousel-control" href="#mycarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Prev</span> </a>
    <a class="right carousel-control" href="#mycarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a>
  </div>
</div>