Question

我的BS4手风琴的卡体内有一个flexbox桌子。桌子下面的身体有很多空白，但我看不到它是从哪里来的。我尝试将问题复制到普通容器中，但不会发生。 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

要解决此问题，您应该在flex-wrap: nowrap;上应用.card。

.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 */
}

带Flexbox表的Bootstrap 4手风琴卡有空白

1 个答案: