Question

美好的一天。

我一直在用CSS敲打我的头，但是找不到合适的样式来移除左侧导航栏中标题面板之间的空间。

我希望删除here显示的（绿色）间距...任何帮助删除它的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="#">
                        robert.gagnon@doodle.com
                        <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

原来提出了相反的问题 - 如何在菜单项之间添加空格（参见Division Between Bootstrap Accordion Elements Not Displaying）。上面的答案中的建议建议添加一个<div class="panel panel-default"> div来获取间距，这是我必须在我的css中移除以删除空格。

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

1 个答案: