如何从自举手风琴上移除底部边框

Question

我看了很多有关如何执行此操作的示例，但找不到一个。

我的代码：

<!--html-->
<div id="navgroupsframe">
  <div class="panel-group" id="accordion">
    <div class="panel" style="margin-left: -15px;">
      <div class="panel-heading">
        <div class="vgroupholder panel-title" data-parent="#accordion" data-toggle="collapse" href=".titleSpanish" onclick="removevBgs();" style="background-color: transparent;" aria-expanded="true">

          <div class="groupicon">
            <div class="groupicontext">S</div>
          </div>
          <div class="grouptext">
            <div class="grouptitle">Spanish</div>
          </div>

        </div>
      </div>
    </div>
    <div class="panel-collapse titleSpanish collapse in" aria-expanded="true" style="">
      <div class="panel-body">
        <div class="panel-group" id="accordion">
          <div class="vgroupholder panel-body" data-parent="#titleSpanish" data-toggle="collapse" style="background-color: transparent;">

            <div class="groupicon" style="width: 80px;height: 80px;margin-left: 20px;">
              <div class="groupicontext" style="font-size: 40px;">C1</div>
            </div>
            <div class="grouptext">
              <div class="grouptitle">Class 1</div>
            </div>

          </div>
        </div>
      </div>
    </div>
    <div class="panel-collapse titleSpanish collapse in" aria-expanded="true" style="">
      <div class="panel-body">
        <div class="panel-group" id="accordion">
          <div class="vgroupholder panel-body" data-parent="#titleSpanish" data-toggle="collapse" style="background-color: transparent;">

            <div class="groupicon" style="width: 80px;height: 80px;margin-left: 20px;">
              <div class="groupicontext" style="font-size: 40px;">C2</div>
            </div>
            <div class="grouptext">
              <div class="grouptitle">Class 2</div>
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="panel-group" id="accordion">
    <div class="panel" style="margin-left: -15px;">
      <div class="panel-heading">
        <div class="vgroupholder panel-title" data-parent="#accordion" data-toggle="collapse" href=".titlePhysics" onclick="removevBgs();" style="background-color: transparent;">

          <div class="groupicon">
            <div class="groupicontext">P</div>
          </div>
          <div class="grouptext">
            <div class="grouptitle">Physics</div>
          </div>

        </div>
      </div>
    </div>
    <div class="panel-collapse titlePhysics collapse" aria-expanded="false" style="height: 0px;">
      <div class="panel-body">
        <div class="panel-group" id="accordion">
          <div class="vgroupholder panel-body" data-parent="#titlePhysics" data-toggle="collapse" style="background-color: transparent;">

            <div class="groupicon" style="width: 80px;height: 80px;margin-left: 20px;">
              <div class="groupicontext" style="font-size: 40px;">S1</div>
            </div>
            <div class="grouptext">
              <div class="grouptitle">Set 1</div>
            </div>

          </div>
        </div>
      </div>
    </div>
    <div class="panel-collapse titlePhysics collapse" aria-expanded="false" style="height: 0px;">
      <div class="panel-body">
        <div class="panel-group" id="accordion">
          <div class="vgroupholder panel-body" data-parent="#titlePhysics" data-toggle="collapse" style="background-color: transparent;">

            <div class="groupicon" style="width: 80px;height: 80px;margin-left: 20px;">
              <div class="groupicontext" style="font-size: 40px;">S2</div>
            </div>
            <div class="grouptext">
              <div class="grouptitle">Set 2</div>
            </div>

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

我尝试使用此：

.panel-group .panel-heading + .panel-collapse > .panel-body {
    border-bottom: none;
}

但是它不起作用。但是，除底部边界外，所有边界均已消失。

我将如何解决此问题？

也

如何添加负的margin-top而不导致手风琴跳动？

任何帮助将不胜感激！

Answer 1

让我知道我是否理解您的问题。我在您的代码段中没有看到任何边框，但是这里有一些注意事项：

而不是：

.panel-group .panel-heading + .panel-collapse > .panel-body {
    border-bottom: none;
}

写：
.panel-group, .panel-heading, .panel-collapse > .panel-body {
    border-bottom: none;
}