Question

我使用Bootstrap显示手风琴（可扩展列表）中SQL服务器的人员列表。

我的问题是手风琴中的连续条目之间有越来越多的空白，我无法摆脱这种空白。

最容易看到它的实际效果： http://ec2-54-200-151-237.us-west-2.compute.amazonaws.com/#

当点击空白时，上面的标签会打开，这是出错的一些线索 - 但是我对html和javascript很新。

以下是创建新面板的JavaScript：

function create_panel(first_name, last_name, idx){
    var $template = $(".template");
    var $newPanel = $template.clone();
    $newPanel.find(".collapse").removeClass("in");
    $newPanel.find(".accordion-toggle").attr("href",  "#" + String(idx))
             .text(last_name+" "+first_name);
    $newPanel.find(".panel-collapse").attr("id", idx).addClass("collapse").removeClass("in");
    return $newPanel;
}

html面板组元素：

<div class="panel-group" id="accordion1">
  <div class="panel panel-default template" style="display:none">
    <div class="panel-heading accordion-toggle" data-toggle="collapse" data-parent="#accordion1" href="#collapse20" style="width:100%;">
      <a class="panel-title"> 
      Mr. Template <span class="label label-danger" style="float:right">Urgent</span>  
      </a>
    </div>
    <div id="collapse20" class="panel-collapse collapse">
      <div class="panel-body">
        <div class="btn-group">
          <button type="button" class="btn"><i class="glyphicon glyphicon-flag"></i></button>
          <button type="button" class="btn"><i class="glyphicon glyphicon-earphone"></i></button>
          <button type="button" class="btn"><i class="glyphicon glyphicon-ok"></i></button>
        </div>
      </div>
    </div>
  </div>
</div>

如果有人能帮我看看问题出在哪里，我将非常感激。

提前致谢

Answer 1

我在发帖后解决了这个问题。

额外的空白正在复合的事实让我失望：

javascript每次创建一个新条目时都指的是最后创建的项$http.get - 因此复合。我在面板元素中添加了Invoke-WebRequest -Uri $uri -OutFile $filePath并将javascript引用更改为.template，现在手风琴看起来很正常了。

连续的bootstrap手风琴入口越来越大？

1 个答案: