Bootstrap 5 Card Header 未填充全宽答案

【问题标题】：Bootstrap 5 Card Header not filling full widthBootstrap 5 Card Header 未填充全宽
【发布时间】：2021-09-20 17:17:10
【问题描述】：

我在卡片中使用表格 (CDN - bootstrap@5.0.2)。

表格的宽度看起来不错，但是当它被挤压时，卡片标题不会调整大小以填充整个宽度。

这是 HTML。

    <div class="card table-responsive">
        <div class="card-header">
            <i class="fas fa-table me-1"></i>
            DataTable Example
        </div>
        <div class="card-body">
            <table class="table table-hover text-center" id="table_summary">
                <!-- I FILL THIS TABLE USING FLASK/JINJA2 -->
            </table>
        </div>
    </div>

卡片中的完整表格看起来不错

调整大小的表格在左侧看起来不错

向右滚动时卡片标题未填满整个宽度。

知道如何使此卡片标题也响应吗？

【问题讨论】：

确保宽度：100%,, 用于标题。

标签： html css bootstrap-4 bootstrap-5

【解决方案1】：

只需将 table-responsive 类从您放置的位置删除，然后将其插入到类 card-body 旁边

<div class="card">
    <div class="card-header">
        <i class="fas fa-table me-1"></i>
        DataTable Example
    </div>
    <div class="card-body table-responsive">
        <table class="table table-hover text-center" id="table_summary">
            <!-- I FILL THIS TABLE USING FLASK/JINJA2 -->
        </table>
    </div>
</div>

或者您可以将table-responsive 类放在它自己的div 元素上，然后放在元素table 之前，如下所示

<div class="card">
<div class="card-header">
    <i class="fas fa-table me-1"></i>
    DataTable Example
</div>
<div class="card-body">
    <div class="table-responsive">
        <table class="table table-hover text-center" id="table_summary">
            <!-- I FILL THIS TABLE USING FLASK/JINJA2 -->
        </table>
    </div>
</div>

来自https://getbootstrap.com/docs/4.1/content/tables/#always-responsive的参考

【讨论】：

【解决方案2】：

滚动卡片标题没有功能。此外，无需将table 嵌套在div.card-body 中。你可以试试：

<div class="card">
    <div class="card-header"><i class="fas fa-table me-1"></i> DataTable Example</div>
    <div class="table-responsive">
        <table class="table table-hover text-center" id="table_summary">
            <!-- FILL THIS TABLE USING FLASK/JINJA2 -->
        </table>
    </div>
</div>

【讨论】：