Bootstrap 5 选项卡窗格无法与 Flexbox 正常配合工作

Answer 1

因为“

.d-flex

”属性带有“

display: flex! Important

”说明符。

但是“

.tab-content> .tab-pane

”仅使用“

display: none

”格式。在这种情况下，“

.d-flex

”将占主导地位，并且在所有情况下都将保持为“

display: flex

”。

另一方面，由于“

opacity: 0

”是不可见的，但它会占用空间。

为了解决这个问题，

方法一：

在“

.tab-pane

”内创建一个新元素。

<div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
<div class="d-flex flex-wrap justify-content-between">
  <div class="floating-div pane-1"></div>
  <div class="floating-div pane-1"></div>
  <div class="floating-div pane-1"></div>
  <div class="floating-div pane-1"></div>
  <div class="floating-div pane-1"></div>
  <div class="floating-div pane-1"></div>
  <div class="floating-div pane-1"></div>
  <div class="floating-div pane-1"></div>
  <div class="floating-div pane-1"></div>
  <div class="floating-div pane-1"></div>  
</div>
</div>

方法二：

编写一个新类。 “

.d-maybe-flex

”

.d-maybe-flex
{
  display: flex;
}

<div class="tab-pane fade show active d-maybe-flex flex-wrap justify-content-between" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
  <div class="floating-div pane-1"></div>
  <div class="floating-div pane-1"></div>
  <div class="floating-div pane-1"></div>
  <div class="floating-div pane-1"></div>
  <div class="floating-div pane-1"></div>
  <div class="floating-div pane-1"></div>
  <div class="floating-div pane-1"></div>
  <div class="floating-div pane-1"></div>
  <div class="floating-div pane-1"></div>
  <div class="floating-div pane-1"></div>  
</div>

示例1

.floating-div {
  float: left;
  display: block;
  height: 100px;
  width: 100px;
  border: 1px solid #dddddd;
  margin: 10px 10px 0 0;
}

.pane-1 {
  background-color: green;
}

.pane-2 {
  background-color: orange;
}

.pane-3 {
  background-color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
  <li class="nav-item" role="presentation">
    <a class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Green</a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Ornage</a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Blue</a>
  </li>
</ul>

<div class="tab-content" id="pills-tabContent">
  <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
    <div class="d-flex flex-wrap justify-content-between">
      <div class="floating-div pane-1"></div>
      <div class="floating-div pane-1"></div>
      <div class="floating-div pane-1"></div>
      <div class="floating-div pane-1"></div>
      <div class="floating-div pane-1"></div>
      <div class="floating-div pane-1"></div>
      <div class="floating-div pane-1"></div>
      <div class="floating-div pane-1"></div>
      <div class="floating-div pane-1"></div>
      <div class="floating-div pane-1"></div>
    </div>
  </div>
  <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
    <div class="d-flex flex-wrap justify-content-between">
      <div class="floating-div pane-2"></div>
      <div class="floating-div pane-2"></div>
      <div class="floating-div pane-2"></div>
      <div class="floating-div pane-2"></div>
      <div class="floating-div pane-2"></div>
    </div>
  </div>
  <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">
    <div class="d-flex flex-wrap justify-content-between">
      <div class="floating-div pane-3"></div>
      <div class="floating-div pane-3"></div>
      <div class="floating-div pane-3"></div>
      <div class="floating-div pane-3"></div>
      <div class="floating-div pane-3"></div>
      <div class="floating-div pane-3"></div>
    </div>
  </div>
</div>

示例2

.d-maybe-flex {
  display: flex
}

.floating-div {
  float: left;
  display: block;
  height: 100px;
  width: 100px;
  border: 1px solid #dddddd;
  margin: 10px 10px 0 0;
}

.pane-1 {
  background-color: green;
}

.pane-2 {
  background-color: orange;
}

.pane-3 {
  background-color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
  <li class="nav-item" role="presentation">
    <a class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Green</a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Ornage</a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Blue</a>
  </li>
</ul>

<div class="tab-content" id="pills-tabContent">
  <div class="tab-pane fade show active d-maybe-flex flex-wrap justify-content-between" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
    <div class="floating-div pane-1"></div>
    <div class="floating-div pane-1"></div>
    <div class="floating-div pane-1"></div>
    <div class="floating-div pane-1"></div>
    <div class="floating-div pane-1"></div>
    <div class="floating-div pane-1"></div>
    <div class="floating-div pane-1"></div>
    <div class="floating-div pane-1"></div>
    <div class="floating-div pane-1"></div>
    <div class="floating-div pane-1"></div>
  </div>
  <div class="tab-pane fade d-maybe-flex flex-wrap justify-content-between" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
    <div class="floating-div pane-2"></div>
    <div class="floating-div pane-2"></div>
    <div class="floating-div pane-2"></div>
    <div class="floating-div pane-2"></div>
    <div class="floating-div pane-2"></div>
  </div>
  <div class="tab-pane fade d-maybe-flex flex-wrap justify-content-between" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">
    <div class="floating-div pane-3"></div>
    <div class="floating-div pane-3"></div>
    <div class="floating-div pane-3"></div>
    <div class="floating-div pane-3"></div>
    <div class="floating-div pane-3"></div>
    <div class="floating-div pane-3"></div>
  </div>
</div>

Answer 2

.d-flex

类应用

display: flex !important

，覆盖

display: none

中的

.tab-content > .tab-pane

，使其保持可见。

此外，

opacity: 0

使元素不可见，但仍然占用空间。

解决方案：

您可以通过确保 Flexbox 布局仅影响 active 选项卡窗格，而不影响隐藏的选项卡窗格来解决此问题。

一种可能的方法是使用 CSS 规则，将

display: none

和

!important

应用于具有

.tab-pane

类但

不活动

的 d-flex 元素。以下是如何做到这一点的示例：

.tab-pane.d-flex:not(.active) {
  display: none !important;
}