0

こんにちは、私の教会の 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>
4

1 に答える 1