Изменить конфигурацию аккордеона Bootstrap

Question

У меня есть этот аккордеон Bootstrap, реализованный в моей сети с помощью 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>

Проблема в том, что если я хочу открыть или закрыть любую карту аккордеона, я должен нажать на тег h5, который явно тоньше, чем div, в котором он содержится. Вы можете видеть, что я имею в виду на этой картинке:

Если вы не нажмете на этот h5, аккордеон не откроется. Я хочу изменить его, чтобы он открывался при щелчке в любом месте заголовка всей карты.

Answer 1

Итак, вы уже объяснили проблему в своем посте: .card-header применяет заполнение, на которое не кликабельно, поскольку JavaScript, включающий компонент Accordion, ищет события в вашем <h5>. В таком случае простейшим подходом будет удалить заполнение из .card-header и применить его к <h5>.

Bootstrap предоставляет служебные классы, которые позволяют вам делать это без каких-либо дополнительных пользовательских 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>

В приведенном выше коде я удалил отступ из .card-header, применив .p-0, который удаляет все отступы из полей X / Y. Затем отступы добавляются к <h5> с .p-3, что добавляет отступы ко всем полям.

Подробнее об утилитах интервалов Bootstrap 4s вы можете узнать из документации:

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