为什么 Bootstrap 中的手风琴标题和内容之间有空格？

Question

我正在 Bootstrap 中制作手风琴，每当我单击它展开时，这条白线就会出现在标题下方。

这就是我现在所拥有的： HTML - 所有 div 都能正确关闭，此页面上还有更多内容

我尝试更改所有不同部分的填充和边距，但这对我没有任何帮助。

#accordionMain{
    padding-top: 50px !important;
    padding-bottom: 200px !important;
}

#accordionHeading{
    background-color: #343A40 !important;
    font-size: 64px;
    padding: 10px;
    border-radius: 15px;
}

#accordionButton{
    color: #FAFAFE !important;
    background-color: #343A40 !important;
    font-size: 48px;
    font-weight: bolder;
}

#accordionBody {
    color: #FAFAFE !important;
    background-color: #343A40 !important;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

/* Buttons for FAQ acordion */
.accordion-button::after {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-circle' viewBox='0 0 16 16'><path d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/><path d='M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z'/></svg>");
}

.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-dash-circle' viewBox='0 0 16 16'><path d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/><path d='M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8z'/></svg>");
}

<div id="accordionMain" class="row d-flex justify-content-center">
                <div class="accordion accordion-flush d-grid gap-4 pt-5 w-50 " id="FlushAccordion">
                    <div id="accordionItems" class="accordion-item">
                        <h2 class="accordion-header " id="accordionHeading">
                            <button id="accordionButton" class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
                                Question 1
                            </button>
                        </h2>
                        <div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="accordionHeading"
                            data-bs-parent="#FlushAccordion">
                            <div id="accordionBody"class="accordion-body">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolores est quasi ex! Ex deleniti consequuntur quisquam earum cupiditate quos ratione eum saepe, cum animi rerum optio repudiandae amet a explicabo?</div>
                        </div>
                    </div>

Answer 1

由于您将

border-radius: 15px;

设置为

#accordionHeading

，因此会生成此空白，通过使用 jquery，您可以修复此部分，如下所示：

  $("button").click(function(){
    if ( $('#accordionButton').attr('aria-expanded') == 'false' ) {
        $("#accordionHeading").css({"border-radius": "15px"});
    } else if ( $('#accordionButton').attr('aria-expanded') == 'true' ) {
        $("#accordionHeading").css({"border-radius": "15px 15px 0px 0px"});
    } 
  });

#accordionMain{
    padding-top: 50px !important;
    padding-bottom: 200px !important;
}

#accordionHeading{
    background-color: #343A40 !important;
    font-size: 64px;
    padding: 10px;
    border-radius: 15px;
}


#accordionButton{
    color: #FAFAFE !important;
    background-color: #343A40 !important;
    font-size: 48px;
    font-weight: bolder;
}

#accordionBody {
    color: #FAFAFE !important;
    background-color: #343A40 !important;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

/* Buttons for FAQ acordion */
.accordion-button::after {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-circle' viewBox='0 0 16 16'><path d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/><path d='M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z'/></svg>");
}

.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-dash-circle' viewBox='0 0 16 16'><path d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/><path d='M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8z'/></svg>");
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div id="accordionMain" class="row d-flex justify-content-center">
                <div class="accordion accordion-flush d-grid gap-4 pt-5 w-50 " id="FlushAccordion">
                    <div id="accordionItems" class="accordion-item">
                        <h2 class="accordion-header " id="accordionHeading">
                            <button id="accordionButton" class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
                                Question 1
                            </button>
                        </h2>
                        <div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="accordionHeading"
                            data-bs-parent="#FlushAccordion">
                            <div id="accordionBody"class="accordion-body">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolores est quasi ex! Ex deleniti consequuntur quisquam earum cupiditate quos ratione eum saepe, cum animi rerum optio repudiandae amet a explicabo?</div>
                        </div>
                    </div>