Bootstrap手风琴侧边栏-删除面板间距

Question

大家好。

我一直在思考CSS，但找不到合适的样式来去除左侧导航栏中标题面板之间的空间。

我希望删除此处显示的（绿色）间距。。。有人帮CSS删除它吗？

我的代码如下：

body {
  padding-top: 60px;
}
@@media (max-width: 979px) {
  body {
    padding-top: 0px;
  }
}
@@media (min-width: 767px) {
  .affix, .affix-top {
    position: fixed;
    width: 180px;
  }
}
.glyphicon {
  margin-right: 10px;
}
.panel-body {
  padding: 0px;
}
.panel-body table tr {
  padding: 0px 0px 0px 0px;
}
.panel-body table tr td {
  /*padding-left: 15px;*/
  padding: 0px 0px 0px 0px;
}
.panel-body .table {
  margin-bottom: 0px;
}
.panel-group.affix {
  background-color: green;
}
.panel {
  padding: 0px 0px 0px 0px;
}
.panel-heading {
  padding: 10px 0px 10px 0px;
  font-style: oblique;
  background-color: turquoise;
}
.panel > .panel-heading > .panel-title > a {
  text-decoration: none;
}
.panel-title {
  background-color: gray;
}
.panel-body {
  background-color: orange;
}
.collapse.navbar-collapse {
  padding: 0px 0px 0px 0px;
  background-color: blue;
}
.pdsa-panel-toggle {
  float: right;
  cursor: pointer;
}
.panel,
.panel-group .panel-heading+.panel-collapse>.panel-body {
  border: none;
}
/* For button glyph */
/* Icon when the collapsible content is shown */
/* .btn:after {
  font-family: "Glyphicons Halflings";
  content: "e114";
  float: right;
  margin-left: 15px;
}
Icon when the collapsible content is hidden
.btn.collapsed:after {
  content: "e080";
}
#accordion.affix-top {
  position: static;
  margin-top: 30px;
  width: 228px;
}
#accordion.affix {
  position: fixed;
  top: 70px;
  width: 228px;
}
.container {
  min-height: 100%;
  width: 100%;
  position: relative;
  background-color: Black;
  display: inline-block;
}
.row {
  width: 20%;
  top: 0px;
  left: 0px;
  bottom: 0px;
  position: absolute;
  background-color: Aqua;
} */

<nav class="navbar navbar-fixed-top navbar-inverse">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#sideNavBar">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="#">SBConsignment</a>
  </div>
  <ul class="nav navbar-nav pull-right">
    <li class="dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                        [e-mail]
                        <span class="caret"></span>
                    </a>
      <ul class="dropdown-menu">
        <li><a href="#">Logout</a></li>
      </ul>
    </li>
    <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
    <li style="padding-removed1em"><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
  </ul>
</nav>
<div class="col-sm-2 col-md-2">
  <div class="collapse navbar-collapse" id="sideNavBar">
    <div class="panel-group affix" id="accordion">
      @*
      <button type="button" class="btn btn-lg btn-info collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Content</button>*@ @*
      <div class="panel panel-default" style="background-color:orange;">*@
        <div class="panel">
          <div class="panel-heading">
            <h4 class="panel-title">
                                <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                                    <span class="glyphicon glyphicon-folder-close">
                                    </span>Content
                                </a>
                                <a class="pdsa-panel-toggle"></a>
                            </h4>
          </div>
          <div id="collapseOne" class="panel-collapse collapse in">
            <div class="panel-body">
              <table class="table">
                <tr>
                  <td>
                    <span class="glyphicon glyphicon-pencil text-primary"></span><a href="http://www.jquery2dotnet.com">Articles</a>
                  </td>
                </tr>
                <tr>
                  <td>
                    <span class="glyphicon glyphicon-flash text-success"></span><a href="http://www.jquery2dotnet.com">News</a>
                  </td>
                </tr>
                <tr>
                  <td>
                    <span class="glyphicon glyphicon-file text-info"></span><a href="http://www.jquery2dotnet.com">Newsletters</a>
                  </td>
                </tr>
                <tr>
                  <td>
                    <span class="glyphicon glyphicon-comment text-success"></span><a href="http://www.jquery2dotnet.com">Comments</a>
                    <span class="badge pull-right">42</span>
                  </td>
                </tr>
              </table>
            </div>
          </div>
        </div>

我尝试过的：

我已经尝试了我能想到的所有样式，但已经没有想法了

Answer 1

结果却提出了相反的问题——如何在菜单项之间添加空间（请参阅Bootstrap Accordion Elements Not Displaying之间的划分）。上面答案中的建议建议添加一个<div class="panel panel-default">div来获得间距，这就是我必须在css中删除的内容来删除空格。