更改Bootstrap手风琴配置

Question

I have this Bootstrap accordion implemented on my web using Bootstrap 4.1.0

<div id="accordion" class="mt-3">
   <div class="card">
       <div class="card-header bg-dark text-white" id="headingOne">
           <h5 class="mb-0 fontBig text-center" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
               Title 1
           </h5>
       </div>

       <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
           <div class="card-body">
               Content 1
           </div>
       </div>
   </div>
   <div class="card">
       <div class="card-header bg-dark text-white" id="headingTwo">
           <h5 class="mb-0 fontBig text-center" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
               Title 2
           </h5>
        </div>
        <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
           <div class="card-body">
               Content 2
           </div>
        </div>
   </div>
</div>

The problem is that if I want to open or close any card of the accordion I have to click on the h5 tag, which is clearly thinner than the div where it is contained. You can see what I mean on this pic:

If you dont click on that h5 the accordion won't open. I want to change it so that it opens when you click anywhere on the whole card-header.

Answer 1

So you've already explained the problem in your post: .card-header applies a padding that isn't clickable since the JavaScript powering the Accordion component looks for events on your <h5> . The simplest approach then would be to remove the padding from .card-header and apply it to <h5> .

Bootstrap provides utility classes that allow you to do that without any additional custom CSS: p*-*

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script> <div id="accordion" class="mt-3"> <div class="card"> <div class="card-header bg-dark text-white p-0" id="headingOne"> <h5 class="mb-0 p-3 fontBig text-center" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">Title 1</h5> </div> <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion"> <div class="card-body">Content 1</div> </div> </div> <div class="card"> <div class="card-header bg-dark text-white p-0" id="headingTwo"> <h5 class="mb-0 p-3 fontBig text-center" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">Title 2</h5> </div> <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion"> <div class="card-body">Content 2</div> </div> </div> </div> 

In the code above I've removed the padding from .card-header by applying .p-0 which removes all padding from X/Y margins. Padding is then added to <h5> with .p-3 which adds padding to all margins.

You can learn more about Bootstrap 4s spacing utilities via the documentation:

https://getbootstrap.com/docs/4.1/utilities/spacing/