html - 如何从 Accordion 图案中删除底部边框？

Question

我正在为带有 Accordion 图案的网站编写代码，但不知道如何从 Accordion 图案的“底部”删除边框。我需要在顶部设置边框，以打开其余的 Accordion 模式 onclick。有谁知道？尝试搜索它，但找不到任何东西。

这是我的代码:

<section id="specification" class="mt-5 pt-4">
    <div class="container-fluid container-fluid-shorter">
        <!--Accordion wrapper-->
        <div class="accordion md-accordion accordion-1" id="accordionEx23" role="tablist">
            <div class="card my-4">
                <div class="card-header blue lighten-3 z-depth-1" role="tab" id="heading96">
                    <h4 class="text-capitalize mb-0 py-1">
                        <a class="text-black font-weight-light" data-toggle="collapse" href="#collapse96" aria-expanded="true"
                           aria-controls="collapse96">
                            kupní typ
                        </a>
                    </h4>
                </div>
                <div id="collapse96" class="collapse show" role="tabpanel" aria-labelledby="heading96"
                     data-parent="#accordionEx23">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-8">
                                <h6 class="font-weight-light black-text text-grey mb-5">Sponsorship</h6>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
         </div>
      </div>
</section>

我尝试添加额外的 CSS，例如:

.card-body{
    border: none !important;
}
.collapse{
    border: none !important;
}

我希望上面的 CSS 属性覆盖边框，但它似乎没有任何区别。任何人都知道如何删除可点击文本下方部分的边框？

Answer 1

为了去除边框，你必须定位.card-header， 所以 css 看起来像:

.card-header {
    border-bottom: none !important;
}

对于底部，您必须编辑卡片本身:

.card {
    border: none !important;
}

请让我知道这是否有效:)