如何從引導手風琴中刪除底部邊框

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