Twitter bootstrap Bootstrap 4表未占用选项卡内容div中的全部水平空间

我想让我的引导表填满所有可用的水平空间

当我从中获取演示表时，它们会填满bootstrap docs页面上的所有垂直空间，但不会填满我站点上的所有水平空间。我能想到的唯一一件事是，我的表位于一个tab content div中——这会有什么不同吗

<div class="col-md-7 col-lg-8 col-xl-9">
    <div class="row">
        <div class="tab-content" id="nav-tabContent">
            <table class="table table-responsive">
                ...

我也试过：

<div class="col-md-7 col-lg-8 col-xl-9">
    <div class="row">
        <div class="tab-content" id="nav-tabContent">
            <div class="container-fluid">
                <table class="table table-responsive">
                    ...

,

---

但这些似乎是绝望的，不起作用。我错过了什么？如何使表格具有响应性，填充列div中可用的任何水平空间？

是的，问题在于选项卡内容div。您有两个选项，要么删除它，要么向该div添加css，使其具有与表格相同的宽度样式。您所需要做的就是添加一个新类或对该类应用不同的css。我建议添加一个类，以防在该页面上有其他选项卡内容的引用。比如：

.tab-contentOverride {
  width: 100%;
  max-width: 100%;
}

并查看我的代码笔以了解差异：

.tab-contentOverride {
  width: 100%;
  max-width: 100%;
}