html - 如何删除 bootstrap 4 中 Accordion 卡头的底部边距？

Question

如何从 bootstrap accordion 中的 card-header 中删除 margin-top。当折叠关闭时，我想要 margin-top，但当打开折叠时，然后删除 margin-top。因为打开折叠时，折叠底部会显示更多空间。该问题的解决方案是什么，我也附上了我想要的图片。

我想要这种类型的图片

img {
  max-width: 100%;
}
  #accordion .card-header {
  position: relative;
  background: transparent;
  border: none;
  border-radius: 0;
  border-bottom: 2px solid #eee;
  padding-left: 0;
  padding-right: 0;
  margin-top: 40px;
}
#accordion .card-header:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
}
#accordion .card-header button {
  padding-left: 0;
  padding-right: 0;
  text-transform: uppercase;
  font-size: 20px;
  line-height: 26px;
  text-decoration: none;
  color: #dc3545;
}
#accordion .card-header button:hover {
  color: #313131;
}
.card {
  border: none;
}
.collapse-content {
  padding: 50px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<section class="main-wraper">
  <div class="container">
    <div class="row">
      <div class="col-12 text-center mt-4">
        <h1>Faq</h1>
      </div>
    </div>
    <div class="row">
      <div class="col-12">
        <div id="accordion">
          <div class="card">
            <div class="card-header" id="headingOne">
              <h5 class="mb-0">
                <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">Lorem Ipsum is simply 1</button>
              </h5>
            </div>

          <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
          <div class="row h-100">
            <div class="col-md-6">
              <img alt="" src="http://placekitten.com/1000/500" />
            </div>
            <div class="col-md-6 collapse-content">
              <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap.</p>
              <button type="button" class="btn btn-danger">Submit</button>
            </div>
          </div>
        </div>
      </div>
      <div class="card">
        <div class="card-header" id="headingTwo">
          <h5 class="mb-0">
            <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">Lorem Ipsum is simply 2</button>
          </h5>
        </div>
      <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
        <div class="row h-100">
          <div class="col-md-6">
            <img alt="" src="http://placekitten.com/1000/500" />
          </div>
        <div class="col-md-6 collapse-content">
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap.</p>
         <button type="button" class="btn btn-danger">Submit</button>
       </div>
     </div>
   </div>
 </div>
 <div class="card">
   <div class="card-header" id="headingThree">
     <h5 class="mb-0">
       <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">Lorem Ipsum is simply 3</button>
     </h5>
   </div>
 <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
   <div class="row h-100">
     <div class="col-md-6">
       <img alt="" src="http://placekitten.com/1000/500" />
     </div>
   <div class="col-md-6 collapse-content">
     <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap.</p>
     <button type="button" class="btn btn-danger">Submit</button>
   </div>
 </div>
</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>            
        </section>
        
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

Answer 1

如果要删除折叠底部的多余空间，只需删除 h-100 类即可。

现在，对于您想要的交互，添加一个类来添加或删除 margin-top。

这应该有效:

CSS:

#accordion .card-header.active {
  margin-top: 0;
}

注意:特异性很重要。

HTML(将“active”类添加到已经打开的类中，否则您不必这样做):

<div class="card-header active" id="headingOne">

JQUERY:

$('.card-header .btn').click(function() {
    if (!$(this).parent().parent().hasClass('active')) {
        $('.card-header').removeClass('active');
        $(this).parent().parent().addClass('active')
    } else {
        $(this).parent().parent().removeClass('active')
    }
}))

这首先删除其余 div 的“事件”类，然后添加到当前点击的 div。

希望这对您有所帮助。