Question

我希望我的引导表填满所有可用的水平空间。

当我从table docs（其中执行填充bootstrap文档页面上的所有垂直空间）中获取演示表时，它们不会填充我站点上的所有水平空间。我能想到的唯一一件事就是我的桌子位于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 class="col-md-7 col-lg-8 col-xl-9">
    <div class="row">
        <div class="tab-content" id="nav-tabContent">
            <div class="container-fluid">
                <div class="row">
                    <table class="table table-responsive">
                        ...

但这些似乎绝望而且无法奏效。我错过了什么？ 如何使表格响应，填充列div中可用的任何水平空间？

Answer 1

是的，问题是因为tab-content div。您有两个选项，要么删除它，要么将css添加到该div以具有与表相同的宽度样式。您需要做的就是添加一个新类或将不同的CSS应用于该类。如果您在该页面上有tab-content的其他引用，我建议添加一个类。类似的东西：

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

并查看我的codepen中的差异：

https://codepen.io/egerrard/pen/BwYJYa

Bootstrap 4表不占用tab-content div中的完整水平空间

1 个答案: