Bootstrap 手风琴元素之间的划分不显示 [英] Division between Bootstrap accordion elements not displaying

查看：14
本文介绍了Bootstrap 手风琴元素之间的划分不显示的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我在

它应该是这样的:

这是我的 html，就像我上面链接的两个网站一样:

<div id="reports-accordion">
<div class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">收购</a>
<div id="collapseOne" class="panel-collapse collapse"><div class="panel-body">面板本体

<div class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">循环</a>

<div id="collapseTwo" class="panel-collapse collapse"><div class="panel-body">面板本体

这是我包含的 css 和 js:

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

如何让我的手风琴中元素之间的分割和间距正确显示?谢谢.

解决方案

你需要修改你的结构试试这个代码

 
<div id="reports-accordion">
<div class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">收购</a>
<div id="collapseOne" class="panel-collapse collapse"><div class="panel-body">面板本体
<div class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">循环</a>
<div id="collapseTwo" class="panel-collapse collapse"><div class="panel-body">面板本体

即使您可以尝试现有的结构，我认为您也缺少 margin-top 属性

.panel-heading {边距顶部:5px；}

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

I've copied the examples here and here to display an accordion using Bootstrap, but the different elements in my accordion won't appear separately from each other. Here's what my code produces for a two element accordion and what it looks like:

Here's what it's supposed to look like:

Here's my html which is just like the two sites I linked above:

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

This is the css and js I'm including:

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

How do I get the division and spacing between elements in my accordion to display correctly? Thank you.

解决方案

You Need to modify your structure try this code

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

Even you can try on your existing structure I think you are missing margin-top property 

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

Try adding this code and if possible please share your code in fiddle

这篇关于Bootstrap 手风琴元素之间的划分不显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆