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;
}

尝试添加此代码，如果可能，请在小提琴中分享您的代码

Bootstrap手风琴元素之间的分区不显示

1 个答案: