Разделение между элементами аккордеона Bootstrap не отображается

Question

Я скопировал примеры here и here, чтобы отобразить аккордеон, используя Bootstrap, но различные элементы в моем аккордеоне не будут отображаться отдельно друг от друга. Вот что мой код создает для два элемента аккордеона а и то, что он выглядит следующим образом:

Вот что он должен выглядеть следующим образом:

Вот мой HTML, который так же, как два сайта я связан выше:

<div class="panel-group" id="accordion"> 
    <div id="reports-accordion"> 
    <div class='panel panel-default'> 

     <div class="panel-heading"> 
     <h4 class="panel-title"> 
      <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Acquisitions</a> 
     </h4> 
     </div> 
     <div id="collapseOne" class="panel-collapse collapse"> 
     <div class="panel-body"> 
      Panel body 
     </div> 
     </div> 

     <div class="panel-heading"> 
     <h4 class="panel-title"> 
      <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">Circulation</a> 
     </h4> 
     </div> 
     <div id="collapseTwo" class="panel-collapse collapse"> 
     <div class="panel-body"> 
      Panel body 
     </div> 
     </div> 

    </div> 
    </div> 
</div> 

Это CSS и JS я в том числе:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 

Как получить разделение и расстояние между элементами в моем аккордеоне, чтобы отображать их правильно? Спасибо.

Answer 1

вам нужно изменить вашу структуру попробуйте этот код

<div class="panel-group" id="accordion"> 
     <div id="reports-accordion"> 
     <div class='panel panel-default'> 

      <div class="panel-heading"> 
      <h4 class="panel-title"> 
       <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Acquisitions</a> 
      </h4> 
      </div> 
      <div id="collapseOne" class="panel-collapse collapse"> 
      <div class="panel-body"> 
       Panel body 
      </div> 
      </div> 
    </div> 
<div class='panel panel-default'> 
      <div class="panel-heading"> 
      <h4 class="panel-title"> 
       <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">Circulation</a> 
      </h4> 
      </div> 
      <div id="collapseTwo" class="panel-collapse collapse"> 
      <div class="panel-body"> 
       Panel body 
      </div> 
      </div> 

     </div> 
     </div> 
    </div> 

Даже вы можете попробовать на существующей структуре, я думаю, вам не хватает margin-top недвижимость

.panel-heading { 
    margin-top: 5px; 
} 

Попробуйте добавить этот код и, если возможно, пожалуйста, поделиться своим кодом в скрипте