こんにちは、私の教会の Web サイトを Bootstrap で作成し、それを Wordpress で作成しています。すべての Wordpress ファイルを分離したときに、なぜ私のアコーディオンがこのようになっているのか知りたかったのです。
青いバーは接触している必要があり、アコーディオンの見出しの下と上にスペースを残すほど太くしてはいけません。
次のように見えるとします。
アコーディオンのすべてのCSSは次のとおりです。
.accback {
margin-top:-20px;
}
.accordion-inner ul li {
list-style:none;
line-height:35px;
color:black;
}
.accordion-toggle {
color:white;
padding:0px;
margin:0px;
border:0px;
}
.accordion-toggle a {
color:white;
padding:0px;
margin:0px;
border:0px;
}
.accordion-heading{
padding:0px;
margin:0px;
border:0px;
}
.accordion-group{
padding:0px;
border:0px;
}
.accordion {
margin:auto;
padding:50px 20px 40px 20px;
max-width:500px;
border:0px;
}
そして、ここに私のアコーディオンがあります:
<div class="hidden-desktop container">
<div class="accback">
<div class="accordion text-center" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading btn-primary">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">Events<div class="pull-left"><i class="icon-chevron-down icon-white"></i></div>
</a>
</div>
<div id="collapseOne" class="accordion-body collapse">
<div class="accordion-inner">
<ul>
<li>Facebook</li>
<li>Twitter</li>
<li>Instagram</li>
<li>LinkIn</li>
</ul>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading btn-primary">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo"><div class="icon-chevron-down icon-white pull-left"></div>
Schedule
</a>
</div>
<div id="collapseTwo" class="accordion-body collapse">
<div class="accordion-inner">
<ul>
<li>(818)111-1111</li>
<li>(818)222-2222</li>
<li>(818)333-3333</li>
<li>(818)444-4444</li>
</ul>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading btn-primary">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree"><div class="icon-chevron-down icon-white pull-left"></div>
Worship Night
</a>
</div>
<div id="collapseThree" class="accordion-body collapse">
<div class="accordion-inner">
<ul>
<li>
blah blah blah blah blah
</li>
</ul>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading btn-primary">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseFour"><div class="icon-chevron-down icon-white pull-left"></div>
Follow Us
</a>
</div>
<div id="collapseFour" class="accordion-body collapse">
<div class="accordion-inner">
<ul>
<li>Facebook</li>
<li>Twitter</li>
<li>Instagram</li>
<li>LinkIn</li>
</ul>
</div>
</div>
</div>
</div>
</div><!---Background of Accordions--->
</div>