我有一个bootstrap 4手风琴。每个卡标题是一行，其中包含3列。我的问题是，当第二列中的文本长度增加时，第一列和第二列之间的间距会增加。这在第二列的文本为“ FORMS COMPLETED”的卡片2B上尤其明显。如何使间距一致且均匀？
<!-- ###### Accordion ###### -->
<div class="accordion" id="activityAccordion">
<!-- Card 1 -->
<div class="card py-0 m-1">
<div class="card-header p-1" id="heading1">
<button class="btn collapsed" type="button" data-toggle="collapse" data-target="#collapse1" aria-expanded="false" aria-controls="collapse1">
<div class="row p-0 m-0 text-left">
<div class="col-3 pl-0 pr-1 py-0 m-0 ">02/04/2019</div>
<div class="col-3 col-3 pl-0 pr-1 py-0 m-0" style="color:#1aa2c1">Phone Call</div>
<div class="col-md-6 pl-0 pr-1 py-0 m-0" style="text-transform:none">Followed up on smart goals</div>
</div>
</button>
</div>
<div id="collapse1" class="collapse" aria-labelledby="heading1" data-parent="#activityAccordion">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<!-- / end Card -->
<!-- Card 2 -->
<div class="card py-0 m-1">
<div class="card-header p-1" id="heading2">
<button class="btn collapsed" type="button" data-toggle="collapse" data-target="#collapse2" aria-expanded="false" aria-controls="collapse2">
<div class="row p-0 m-0 text-left">
<div class="col-3 pl-0 pr-1 py-0 m-0">01/25/2019</div>
<div class="col-3 col-3 pl-0 pr-1 py-0 m-0" style="color:#01c16d">Interview</div>
<div class="col-md-6 pl-0 pr-1 py-0 m-0" style="text-transform:none">Took PCL-5, GAD-7, and PIL</div>
</div>
</button>
</div>
<div id="collapse2" class="collapse" aria-labelledby="heading2" data-parent="#activityAccordion">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<!-- / end Card -->
<!-- Card 2B -->
<div class="card py-0 m-1">
<div class="card-header p-1" id="heading2B">
<button class="btn collapsed" type="button" data-toggle="collapse" data-target="#collapse2B" aria-expanded="false" aria-controls="collapse2B">
<div class="row p-0 m-0 text-left">
<div class="col-3 pl-0 pr-1 py-0 m-0">01/12/2019</div>
<div class="col-3 col-3 pl-0 pr-1 py-0 m-0" style="color:#bea623">Forms Complete</div>
<div class="col-md-6 pl-0 pr-1 py-0 m-0" style="text-transform:none">Parents signed consent to treat, intake complete</div>
</div>
</button>
</div>
<div id="collapse2B" class="collapse" aria-labelledby="heading2B" data-parent="#activityAccordion">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<!-- / end Card -->
<!-- Card 3 -->
<div class="card py-0 m-1">
<div class="card-header p-1" id="heading3">
<button class="btn collapsed" type="button" data-toggle="collapse" data-target="#collapse3" aria-expanded="false" aria-controls="collapse3">
<div class="row p-0 m-0 text-left">
<div class="col-3 pl-0 pr-1 py-0 m-0">01/10/2019</div>
<div class="col-3 col-3 pl-0 pr-1 py-0 m-0" style="color:#a90092">Counseling</div>
<div class="col-md-6 pl-0 pr-1 py-0 m-0" style="text-transform:none">First visit, suspected depression</div>
</div>
</button>
</div>
<div id="collapse3" class="collapse" aria-labelledby="heading3" data-parent="#activityAccordion">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<!-- / end Card -->
<!-- Card 4 -->
<div class="card py-0 m-1">
<div class="card-header p-1" id="heading4">
<button class="btn collapsed" type="button" data-toggle="collapse" data-target="#collapse4" aria-expanded="false" aria-controls="collapse4">
<div class="row p-0 m-0 text-left">
<div class="col-3 pl-0 pr-1 py-0 m-0 ">02/04/2019</div>
<div class="col-3 col-3 pl-0 pr-1 py-0 m-0" style="color:#1aa2c1">Phone Call</div>
<div class="col-md-6 pl-0 pr-1 py-0 m-0" style="text-transform:none">Followed up on smart goals</div>
</div>
</button>
</div>
<div id="collapse4" class="collapse" aria-labelledby="heading4" data-parent="#activityAccordion">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<!-- / end Card -->
<!-- Card 5 -->
A
<!-- / end Card -->
<!-- Card 6 -->
<div class="card py-0 m-1">
<div class="card-header p-1" id="heading6">
<button class="btn collapsed" type="button" data-toggle="collapse" data-target="#collapse6" aria-expanded="false" aria-controls="collapse6">
<div class="row p-0 m-0 text-left">
<div class="col-3 pl-0 pr-1 py-0 m-0 ">01/10/2019</div>
<div class="col-3 col-3 pl-0 pr-1 py-0 m-0" style="color:#a90092">Counseling </div>
<div class="col-md-6 pl-0 pr-1 py-0 m-0" style="text-transform:none">First visit, suspected depression</div>
</div>
</button>
</div>
<div id="collapse6" class="collapse" aria-labelledby="heading6" data-parent="#activityAccordion">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<!-- / end Card -->
</div>
<!-- / end Accordion -->
您的间距正在增加，因为您在按钮内部有<div class='row'>，并且该按钮正在根据其内部内容调整其宽度，因此具有更多文本的按钮将其宽度赋予子行和子列，而<div class='col-3'>没有与div具有相同类别的div宽度相同，而其他卡片的按钮内部具有不同的文本量。您可以尝试使用CSS将固定宽度放在按钮上，像这样]
.btn{
width:700px !important;
}
@@ Alex帮助我理解了按钮类的格式结构正在干扰列。为了使所有内容具有响应性且不固定，我将按钮样式的手风琴更改为链接样式的手风琴，并删除了btn类。请参阅我的代码示例，以获取有关此问题的单独答案