时间戳

首页 > 解决方案 > 如何从引导手风琴中删除底部边框

html - 如何从引导手风琴中删除底部边框

问题描述

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

我的代码：

<!--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不导致手风琴跳跃的情况下添加负数？

任何帮助将非常感激！

截屏

标签： htmlcssbootstrap-4accordion

解决方案

如果我理解你的问题，请告诉我。我在您的代码片段中看不到任何边框，但请注意：

代替：

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

写：

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

推荐阅读