Question

我使用Bootstrap 4.1.0

在我的网站上实现了这个Bootstrap手风琴

<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应用不可点击的填充，因为为Accordion组件供电的JavaScript会查找{{1}上的事件}}。最简单的方法是从<h5>中删除填充并将其应用于.card-header。

Bootstrap提供的实用程序类允许您在没有任何其他自定义CSS的情况下执行此操作：<h5>

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删除了填充，从而删除了X / Y边距的所有填充。然后使用.p-0将填充添加到<h5>，这会将填充添加到所有边距。

您可以通过以下文档了解有关Bootstrap 4s间距实用程序的更多信息：

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

更改Bootstrap手风琴配置

1 个答案: