Bootstrap 4手风琴卡与柔性盒桌子有白色空间

Question

我有一个BS4手风琴，卡体中有一个柔性折叠桌。尸体在桌子下面有很多空白，但我不知道它是从哪里来的。我曾尝试在普通容器中复制此问题，但没有成功。Flexbox的桌子似乎不太适合手风琴，因为我可以去掉flex类，它就可以工作了。

CodePen对我所看到的内容：https://codepen.io/shavertech/pen/QJjOwX

<div class="container">
<div id="accordion" class="col">
<div class="card row">
<div class="card-header" id="headingOne">
<span class="float-left">
<h5>General <small><br>General conversation</small></h5>
</span>
<button class="btn btn-link float-right" data-toggle="collapse" data-target="#collapse1" aria-expanded="true" aria-controls="collapse1">
<i class="fa fa-chevron-up" aria-hidden="true"></i>
</button>
</div>
<div id="collapse1" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
<div class="row card-body">
<div class="table-responsive">
<table class="table table-bordered">
<thead class="thead-dark">
<tr class="d-flex">
<th class="col-8">Forum</th>
<th class="col-1">Topics</th>
<th class="col-1">Posts</th>
<th class="col-2">Last Post</th>
</tr>
</thead>
<tbody>
<tr class="d-flex">
<td class="col-8">Support</td>
<td class="col-1">topic count</td>
<td class="col-1">post count</td>
<td class="col-2">Last Post Date</td>
</tr>
<tr class="d-flex">
<td class="col-8">Support2</td>
<td class="col-1">topic count</td>
<td class="col-1">post count</td>
<td class="col-2">Last Post Date</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div id="accordion" class="col">
<div class="card row">
<div class="card-header" id="headingOne">
<span class="float-left">
<h5>support <small><br>All Support</small></h5>
</span>
<button class="btn btn-link float-right" data-toggle="collapse" data-target="#collapse2" aria-expanded="true" aria-controls="collapse2">
<i class="fa fa-chevron-up" aria-hidden="true"></i>
</button>
</div>
<div id="collapse2" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
<div class="row card-body">
</div>
</div>
</div>
</div>
<div id="accordion" class="col">
<div class="card row">
<div class="card-header" id="headingOne">
<span class="float-left">
<h5>support2 <small><br></small></h5>
</span>
<button class="btn btn-link float-right" data-toggle="collapse" data-target="#collapse3" aria-expanded="true" aria-controls="collapse3">
<i class="fa fa-chevron-up" aria-hidden="true"></i>
</button>
</div>
<div id="collapse3" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
<div class="row card-body">
</div>
</div>
</div>
</div>
</div>

CodePen到非Flexbox版本：https://codepen.io/shavertech/pen/RqryJb

<div class="container">
<div id="accordion" class="col">
<div class="card row">
<div class="card-header" id="headingOne">
<span class="float-left">
<h5>General <small><br>General conversation</small></h5>
</span>
<button class="btn btn-link float-right" data-toggle="collapse" data-target="#collapse1" aria-expanded="true" aria-controls="collapse1">
<i class="fa fa-chevron-up" aria-hidden="true"></i>
</button>
</div>
<div id="collapse1" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
<div class="row card-body">
<div class="table-responsive">
<table class="table table-bordered">
<thead class="thead-dark">
<tr>
<th>Forum</th>
<th>Topics</th>
<th>Posts</th>
<th>Last Post</th>
</tr>
</thead>
<tbody>
<tr>
<td>Support</td>
<td>topic count</td>
<td>post count</td>
<td>Last Post Date</td>
</tr>
<tr>
<td>Support2</td>
<td>topic count</td>
<td>post count</td>
<td>Last Post Date</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div id="accordion" class="col">
<div class="card row">
<div class="card-header" id="headingOne">
<span class="float-left">
<h5>support <small><br>All Support</small></h5>
</span>
<button class="btn btn-link float-right" data-toggle="collapse" data-target="#collapse2" aria-expanded="true" aria-controls="collapse2">
<i class="fa fa-chevron-up" aria-hidden="true"></i>
</button>
</div>
<div id="collapse2" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
<div class="row card-body">
</div>
</div>
</div>
</div>
<div id="accordion" class="col">
<div class="card row">
<div class="card-header" id="headingOne">
<span class="float-left">
<h5>support2 <small><br></small></h5>
</span>
<button class="btn btn-link float-right" data-toggle="collapse" data-target="#collapse3" aria-expanded="true" aria-controls="collapse3">
<i class="fa fa-chevron-up" aria-hidden="true"></i>
</button>
</div>
<div id="collapse3" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
<div class="row card-body">
</div>
</div>
</div>
</div>
</div>

Answer 1

若要修复此问题，应在.card上应用flex-wrap: nowrap;。

.card {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border: 1px solid rgba(0,0,0,.125);
border-radius: .25rem;
flex-wrap: nowrap; /* Key Line */
}