如何修复 bootstrap 手风琴卡片 header 中不稳定的列间距？
How to fix erratic column spacing in bootstrap accordion card header?
我有一个 bootstrap 4 手风琴。每张卡片 header 是一行，其中包含 3 列。我的问题是，当第二列中的文本长度增加时，第一列和第二列之间的间距会增加。这在卡片 2B 上尤为明显，它在第二列中包含文本 "FORMS COMPLETED"。如何使间距一致均匀？
<!-- ###### 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'> inside button，并且该按钮正在根据其中的内容调整其宽度因此具有更多文本的按钮将其宽度提供给子行和列 <div class='col-3'> 的宽度与 div 的宽度不同，而 class 与其他卡片的宽度相同 button.You 可以尝试将固定宽度放在带有 [=16= 的按钮上] 像这样
.btn{
width:700px !important;
}
@Alex 帮助我理解按钮 class 的格式结构干扰了列。为了保持一切响应，我没有使用固定宽度。我从手风琴中删除了按钮样式并将其更改为 link 样式。
<!-- ###### Accordion ###### -->
<div class="accordion" id="activityAccordion">
<!-- Card 1 -->
<div class="card py-0 m-1">
<div class="card-header p-1" id="heading1">
<a class="collapsed" data-toggle="collapse" data-target="#collapse1" aria-expanded="false" aria-controls="collapse1">
<div class="row p-0 m-1 text-left">
<div class="col-2 p-0 m-0">02/04/2019</div>
<div class="col-3 p-0 m-0 text-uppercase" style="color:#1aa2c1">Phone Call</div>
<div class="col-md-7 p-0 m-0">Followed up on smart goals</div>
</div>
</a>
</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">
<a class="collapsed" data-toggle="collapse" data-target="#collapse2" aria-expanded="false" aria-controls="collapse2">
<div class="row p-0 m-1 text-left">
<div class="col-2 p-0 m-0">01/25/2019</div>
<div class="col-3 p-0 m-0 text-uppercase" style="color:#01c16d">Interview</div>
<div class="col-md-7 p-0 m-0">Took PCL-5, GAD-7, and PIL</div>
</div>
</a>
</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">
<a class="collapsed" data-toggle="collapse" data-target="#collapse2B" aria-expanded="false" aria-controls="collapse2B">
<div class="row p-0 m-1 text-left">
<div class="col-2 p-0 m-0">01/12/2019</div>
<div class="col-3 p-0 m-0 text-uppercase" style="color:#bea623">Forms Complete</div>
<div class="col-md-7 p-0 m-0">Parents signed consent to treat, intake complete</div>
</div>
</a>
</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">
<a class="collapsed" data-toggle="collapse" data-target="#collapse3" aria-expanded="false" aria-controls="collapse3">
<div class="row p-0 m-1 text-left">
<div class="col-2 p-0 m-0">01/10/2019</div>
<div class="col-3 p-0 m-0 text-uppercase" style="color:#a90092">Counseling</div>
<div class="col-md-7 p-0 m-0">First visit, suspected depression</div>
</div>
</a>
</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">
<a class="collapsed" data-toggle="collapse" data-target="#collapse4" aria-expanded="false" aria-controls="collapse4">
<div class="row p-0 m-1 text-left">
<div class="col-2 p-0 m-0">02/04/2019</div>
<div class="col-3 p-0 m-0 text-uppercase" style="color:#1aa2c1">Phone Call</div>
<div class="col-md-7 p-0 m-0">Followed up on smart goals</div>
</div>
</a>
</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 -->
<!-- / end Card -->
<!-- Card 6 -->
<div class="card py-0 m-1">
<div class="card-header p-1" id="heading6">
<a class="collapsed" data-toggle="collapse" data-target="#collapse6" aria-expanded="false" aria-controls="collapse6">
<div class="row p-0 m-1 text-left">
<div class="col-2 p-0 m-0 ">01/10/2019</div>
<div class="col-3 p-0 m-0 text-uppercase" style="color:#a90092">Counseling</div>
<div class="col-md-7 p-0 m-0">First visit, suspected depression</div>
</div>
</a>
</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 -->
我有一个 bootstrap 4 手风琴。每张卡片 header 是一行，其中包含 3 列。我的问题是，当第二列中的文本长度增加时，第一列和第二列之间的间距会增加。这在卡片 2B 上尤为明显，它在第二列中包含文本 "FORMS COMPLETED"。如何使间距一致均匀？
<!-- ###### 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'> inside button，并且该按钮正在根据其中的内容调整其宽度因此具有更多文本的按钮将其宽度提供给子行和列 <div class='col-3'> 的宽度与 div 的宽度不同，而 class 与其他卡片的宽度相同 button.You 可以尝试将固定宽度放在带有 [=16= 的按钮上] 像这样
.btn{
width:700px !important;
}
@Alex 帮助我理解按钮 class 的格式结构干扰了列。为了保持一切响应，我没有使用固定宽度。我从手风琴中删除了按钮样式并将其更改为 link 样式。
<!-- ###### Accordion ###### -->
<div class="accordion" id="activityAccordion">
<!-- Card 1 -->
<div class="card py-0 m-1">
<div class="card-header p-1" id="heading1">
<a class="collapsed" data-toggle="collapse" data-target="#collapse1" aria-expanded="false" aria-controls="collapse1">
<div class="row p-0 m-1 text-left">
<div class="col-2 p-0 m-0">02/04/2019</div>
<div class="col-3 p-0 m-0 text-uppercase" style="color:#1aa2c1">Phone Call</div>
<div class="col-md-7 p-0 m-0">Followed up on smart goals</div>
</div>
</a>
</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">
<a class="collapsed" data-toggle="collapse" data-target="#collapse2" aria-expanded="false" aria-controls="collapse2">
<div class="row p-0 m-1 text-left">
<div class="col-2 p-0 m-0">01/25/2019</div>
<div class="col-3 p-0 m-0 text-uppercase" style="color:#01c16d">Interview</div>
<div class="col-md-7 p-0 m-0">Took PCL-5, GAD-7, and PIL</div>
</div>
</a>
</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">
<a class="collapsed" data-toggle="collapse" data-target="#collapse2B" aria-expanded="false" aria-controls="collapse2B">
<div class="row p-0 m-1 text-left">
<div class="col-2 p-0 m-0">01/12/2019</div>
<div class="col-3 p-0 m-0 text-uppercase" style="color:#bea623">Forms Complete</div>
<div class="col-md-7 p-0 m-0">Parents signed consent to treat, intake complete</div>
</div>
</a>
</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">
<a class="collapsed" data-toggle="collapse" data-target="#collapse3" aria-expanded="false" aria-controls="collapse3">
<div class="row p-0 m-1 text-left">
<div class="col-2 p-0 m-0">01/10/2019</div>
<div class="col-3 p-0 m-0 text-uppercase" style="color:#a90092">Counseling</div>
<div class="col-md-7 p-0 m-0">First visit, suspected depression</div>
</div>
</a>
</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">
<a class="collapsed" data-toggle="collapse" data-target="#collapse4" aria-expanded="false" aria-controls="collapse4">
<div class="row p-0 m-1 text-left">
<div class="col-2 p-0 m-0">02/04/2019</div>
<div class="col-3 p-0 m-0 text-uppercase" style="color:#1aa2c1">Phone Call</div>
<div class="col-md-7 p-0 m-0">Followed up on smart goals</div>
</div>
</a>
</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 -->
<!-- / end Card -->
<!-- Card 6 -->
<div class="card py-0 m-1">
<div class="card-header p-1" id="heading6">
<a class="collapsed" data-toggle="collapse" data-target="#collapse6" aria-expanded="false" aria-controls="collapse6">
<div class="row p-0 m-1 text-left">
<div class="col-2 p-0 m-0 ">01/10/2019</div>
<div class="col-3 p-0 m-0 text-uppercase" style="color:#a90092">Counseling</div>
<div class="col-md-7 p-0 m-0">First visit, suspected depression</div>
</div>
</a>
</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 -->