如何修复bootstrap折叠卡片表头不稳定的列间距？
如何修复bootstrap折叠卡片表头不稳定的列间距？
提问于 2020-02-05 13:48:29
我有一把手风琴。每个卡片标题是一行，其中包含3列。我的问题是，当第二列中的文本长度增加时，第一列和第二列之间的间距会增加。这在卡片2B上尤其明显，因为卡片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 -->回答 2
Stack Overflow用户
回答已采纳
发布于 2020-02-05 14:32:59
您间距增加是因为您有<div class='row'>内部按钮，且该按钮根据其内部内容调整其宽度。因此，具有更多文本的按钮将其宽度提供给子行和子列，而<div class='col-3'>的宽度与具有相同类的div的宽度不同，而button.You内部具有不同文本量的其他卡片可以尝试将固定宽度放置在带有css的按钮上
.btn{
width:700px !important;
}Stack Overflow用户
发布于 2020-02-06 06:56:45
@Alex帮助我理解了button类的格式化结构干扰了列。为了保持所有内容的响应性，我没有使用固定宽度。我从accordion中删除了按钮样式，并将其更改为链接样式。
<!-- ###### 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 -->
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60069677
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号