html - 如何修复引导手风琴卡标题中不稳定的列间距？

Question

我有一个 bootstrap 4 手风琴。每个卡片标题是一行，其中包含 3 列。我的问题是当第二列中的文本长度增加时，第一列和第二列之间的间距会增加。这在卡片 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 -->

标签： htmlcssbootstrap-4accordion

Answer 1

您的间距正在增加，因为您有<div class='row'>内部按钮，并且该按钮正在根据其中的内容调整其宽度，因此具有更多文本的按钮将其宽度提供给子行和列，并且<div class='col-3'>与具有相同类的 div 的宽度不同其他一些在按钮内有不同数量文本的卡片。您可以尝试使用这样的 css 在按钮上放置固定宽度

.btn{
    width:700px !important;
}